如何以编程方式将所有样式属性从一个DOM元素复制到另一个DOM元素

Question

我有一个有两个框架的页面,我需要(通过javascript)复制一个元素及其所有嵌套元素(它是一个ul/li树),最重要的是它是从一个框架到另一个框架的样式.

我通过分配innerhtml获得所有内容,并且我能够使用dest.style.left和dest.style.top将新元素放在第二帧中,并且它可以正常工作.但是我正在尝试获取所有样式信息而且没有发生任何事情.

我正在使用getComputedStyle来获取每个源元素的最终样式,因为我遍历每个节点然后将它们分配到目标节点列表中的相同位置,并且没有任何东西可以直观地更改样式.

我错过了什么？

Answer 1

使用getComputedStyle,您可以获取cssText将在CSS字符串中获取整个计算样式的属性:

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

不幸的是,getComputedStyleInternet Explorer不支持使用它currentStyle.令人遗憾的是,currentStyle返回null 的事实cssText,因此同样的方法不能应用于IE.如果没有人打败我,我会试着为你找出一些东西:-)

我考虑过它,你可以使用一个for...in声明在IE中模仿上面的内容:

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

你试过cloneNode吗？它可以一举复制元素及其所有子元素. http://www.w3schools.com/dom/met_element_clonenode.asp