Solved

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

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

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ASP get fieds value 2 20
Timer on div 5 22
null, truthy, falsey confusion 25 28
Hta File displays dynamic File names 4 43
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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

685 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