How can I programmatically copy all of the style attributes from one DOM element to another

Question

I have a page with two frames, and I need to (via javascript) copy an element and all of its nested elements (it's a ul/li tree) and most importantly it's style from one frame to the other.

I get all the content via assigning innerhtml, and I am able to position the new element in the second frame with dest.style.left and dest.style.top and it works. But I'm trying to get all the style information and nothing's happening.

I'm using getComputedStyle to get the final style for each source element as I loop through each node then and assigning them to the same position in the destination nodelist and nothing happens to visually change the style.

What am I missing?

Answer 1

With getComputedStyle, you can get the cssText property which will fetch the entire computed style in a CSS string:

var completeStyle = window.getComputedStyle(element1, null).cssText;
element2.style.cssText = completeStyle;

Unfortunately, getComputedStyle isn't supported by Internet Explorer, which uses currentStyle instead. Doubly unfortunate is the fact that currentStyle returns null for cssText, so the same method cannot be applied to IE. I'll try and figure something out for you, if nobody beats me to it :-)

---

I thought about it and you could emulate the above in IE using a for...in statement:

var completeStyle = "";
if ("getComputedStyle" in window)
    completeStyle = window.getComputedStyle(element1, null).cssText;
else
{
    var elStyle = element1.currentStyle;
    for (var k in elStyle) { completeStyle += k + ":" + elStyle[k] + ";"; }
}

element2.style.cssText = completeStyle;

Answer 2

Have you tried cloneNode? It can copy the element and all of its children in one fell swoop. http://www.w3schools.com/dom/met_element_clonenode.asp

Answer 3

This will work if the styles are applied via the "style" attribute on an element.

http://stackoverflow.com/questions/2087778/javascript-copy-style

Answer 4

Well I gave up the original tack of trying to get the [computed] style information out of the source tag, I just never got it to work.

So instead I tried this, and it did work...

First I grabbed the -style- tag from the source frame, then I appendChilded it to the end of the -head- tag of the second frame. For which this proved useful... http://stackoverflow.com/questions/875610/how-do-you-copy-an-inline-style-element-in-ie

Then I made a few nested div elements, each having an id or style class I needed to inherit so that the hierarchy matched the first frame. Then I shoved the innerhtml of the source frame's tag that I wanted to copy and then finally appendChilded it to the body of the second frame, and magically, it all worked.

var topd = doc.createElement('div'); // make a div that we can attach all our styles to so they'll be inherited
topd.id = 'menuanchorelement';
// shove our desired tag in the middle of a few nested elements that have all the classes we need to inherit...
topd.innerHTML = "<div id='multi-level'><ul class='menu'>" + dh.innerHTML + "</ul></div>";

doc.body.appendChild(topd); // voila