Solved

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

Posted on 2011-02-25
4
277 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 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