Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-02-25
4
Medium Priority
?
308 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

722 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