Solved

What's the easiest way to copy body css and replicate it in a div with javascript.

Posted on 2011-02-25
4
230 Views
Last Modified: 2012-05-11
This seemed like a simple problem at first, and it probably is, just need a push here.

I would like to take the body background related css, clean the body from any background-css. and put the copied css inside a div instead.

Something like:

         var _body = document.getElementsByTagName("body")[0];

       var _copy_of_background = _body.background;
      
       _body.background = '';

         document.getElementById('theDiv').style.background = _copy_of_background;
      
0
Comment
Question by:walkman69
  • 2
4 Comments
 
LVL 38

Expert Comment

by:Aaron Tomosky
ID: 34985063
Cant you just do:
document.getElementById('theDiv').style.background = document.body.style.background
0
 
LVL 1

Expert Comment

by:m1m1k
ID: 35693039
I think there is a misunderstanding of the terms here:

body background related css,
Do you mean ALL the background related css?  Or just the background-image ?
like:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position



clean the body from any background-css.
Again, if you mean All the different properties, you might have to do them separately
although on second thought, I think arrontomosky's code above would work just fine.


and put the copied css inside a div instead
do you want to APPLY the css to a different div, or copy in the text of the css?
We're assuming you're trying to APPLY the css to a seperate div.

aarontomosky's answer is correct:  but you might want to do all the other properties as well:
document.getElementById('theDiv').style.background = document.body.style.background;


document.getElementById('theDiv').style.backgroundColor= document.body.style.backgroundColor;
document.getElementById('theDiv').style.backgroundImage= document.body.style.backgroundImage;
document.getElementById('theDiv').style.backgroundRepeat= document.body.style.backgroundRepeat;
document.getElementById('theDiv').style.backgroundAttachment= document.body.style.backgroundAttachment;
document.getElementById('theDiv').style.backgroundPosition= document.body.style.backgroundPosition;

//then clear your body background:
document.body.style.background = 'none';

Open in new window


May I ask why you would want to do this?
0
 
LVL 2

Accepted Solution

by:
walkman69 earned 0 total points
ID: 36184507
In the end i had to do the folowing to get it to work.


      var _body = document.getElementsByTagName("body");
      
      if (window.getComputedStyle) {
            // For real browsers
            var _pageBackgroundImage = window.getComputedStyle(_body[0],null).getPropertyValue('background-image');
      } else {
            // For IE      
            var _pageBackgroundImage = _body[0].currentStyle['backgroundImage'];      
      }
      


            _body[0].style.backgroundImage = 'none';
            
            document.getElementById('_gui_content_center').style.backgroundImage = _pageBackgroundImage;
            document.getElementById('_gui_content_center').style.backgroundRepeat="repeat-x";
            

            



0
 
LVL 2

Author Closing Comment

by:walkman69
ID: 36206117
I accept my own solution as the solve, since the other mathod didn't work in my specific case.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now