javascript - 如何以编程方式将所有样式属性从一个 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;

不幸的是，Internet Explorer 不支持 getComputedStyle，它使用 currentStyle。更不幸的是 currentStyle 为 cssText 返回 null，所以同样的方法不能应用于 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;