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

【问题标题】：How can I programmatically copy all of the style attributes from one DOM element to another如何以编程方式将所有样式属性从一个 DOM 元素复制到另一个
【发布时间】：2011-02-12 12:19:48
【问题描述】：

我有一个包含两个框架的页面，我需要（通过 javascript）复制一个元素及其所有嵌套元素（它是一个 ul/li 树），最重要的是它的样式从一个框架到另一个框架。

我通过分配 innerhtml 获得所有内容，并且我能够使用 dest.style.left 和 dest.style.top 将新元素定位在第二帧中，并且它可以工作。但我正在尝试获取所有样式信息，但什么也没发生。

当我循环遍历每个节点并将它们分配到目标节点列表中的相同位置时，我正在使用 getComputedStyle 获取每个源元素的最终样式，并且在视觉上没有任何变化。

我错过了什么？

【问题讨论】：

几乎是Duplicating an element (and its style) with JavaScript的副本。
Object.assign(el.style, otherEl.style)

标签： javascript dom coding-style

【解决方案1】：

使用getComputedStyle，您可以获得cssText 属性，它将获取CSS 字符串中的整个计算样式：

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

很遗憾，Internet Explorer 不支持 getComputedStyle，而是使用 currentStyle。不幸的是，currentStyle 为cssText 返回 null，因此不能将相同的方法应用于 IE。我会尽力为你想办法，如果没有人能打败我:-)

我考虑了一下，您可以在 IE 中使用for...in 语句来模拟上述内容：

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;

【讨论】：

现在试试这个，因为克隆对我不起作用。 getcomputedstyle() 需要两个参数供任何关注我工作的人使用……很快就会更新。
我一定要疯了。我花了一整天的时间来解决这个问题，但一无所获。我正在逐步使用firebug，我有一个递归函数，它跟随每个nodechild并调用getcomputedstyle，firebug返回一个包含162个键的computedCSSStyleDeclaration，但没有值设置，所以当我调用.cssText时我什么也得不到。但是当我用 firebug 查看元素时，IT 可以获得所有的计算样式信息。啊啊啊啊啊啊啊啊！！！！！！！！！
也许我遗漏了一些明显的东西。 getcomputedstyle() 是否忽略 CSS 样式标签中定义的内容？这就是定义我试图复制的所有样式的地方。我将尝试将样式放入标签中...
为所有在家跟随的人更新剧情。如果您将 style="..." 信息放在每个标签中，并复制 innerHTML 它也会复制样式信息。不幸的是，我认为我的设计师不会容忍所有样式信息都在每个标签中的要求。我的下一个测试将是手动复制
@stu: 很抱歉没有早点回复，昨天我请了一位宽带工程师到我家。你试过火狐以外的其他浏览器吗？这可能是一个孤立的问题，对于 Firefox，您可能必须像在 IE 中一样遍历样式属性。此外，getComputedStyle 只需要一个参数，第二个是完全可选的，对于常规元素应该是 null。

【解决方案2】：

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

【讨论】：

如果需要将其作为字符串传输，应该可以使用JSON。这实际上可能最终比尝试传输计算的样式要小，如果适当的 css 在两种上下文中都可用，它应该可以正常工作。
+1 - 如果样式由 ID 选择器 (#myFrame { }) 或其他不适用于新节点的选择器应用，cloneNode 可能不会复制整个样式，但这应该是完美的，如果这里不是这样。
一定错过了我非常期待自己必须做的那部分文档，但可惜它也不起作用，这让我相信还有其他问题。我觉得从一帧到另一帧会有一些细微差别。克隆是否一定会选择从父节点继承到我正在克隆的样式？
@stu, cloneNode 只会复制设置的属性和属性（即，任何内联或 DOM 应用的样式，以及触发应用 CSS 样式的任何属性）。如果某些样式是通过从父元素继承来确定的，那么只有在克隆的子元素附加到相同的结构并且相同的 CSS 可用时，这些样式才会应用于您的其他框架。另外值得注意的是，在帧之间移动 DOM 节点时，您应该查看document.importNode，因为某些浏览器会限制操作，除非您明确这样做。
感谢您的提示。我会检查一下。我有一个好主意，将节点复制到同一帧以隔离问题，但它仍然没有选择样式，所以我错过了其他东西。因此，如果 clone 没有获取父样式特征，我将不得不返回 getcomputedstyle。

【解决方案3】：

好吧，我放弃了尝试从源标签中获取 [计算] 样式信息的原始策略，但我只是无法正常工作。

所以我尝试了这个，它确实有效......

首先，我从源框架中获取 -style- 标记，然后将其附加到第二个框架的 -head- 标记的末尾。这被证明是有用的…… How do you copy an inline style element in IE?

然后我制作了一些嵌套的 div 元素，每个元素都有一个我需要继承的 id 或样式类，以便层次结构与第一帧匹配。然后我将我想要复制的源框架标签的 innerhtml 推到了第二个框架的主体上，然后神奇地，一切都奏效了。

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); // 瞧

【讨论】：