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

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... 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