Solved

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

Posted on 2011-02-25
4
242 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

864 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

21 Experts available now in Live!

Get 1:1 Help Now