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

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;
Who is Participating?
walkman69Connect With a Mentor Author Commented:
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;


Aaron TomoskySD-WAN SimplifiedCommented:
Cant you just do:
document.getElementById('theDiv').style.background = document.body.style.background
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 ?

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?
walkman69Author Commented:
I accept my own solution as the solve, since the other mathod didn't work in my specific case.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.