将所有样式从一个元素复制到另一个元素答案

【问题标题】：Copy all styles from one element to another将所有样式从一个元素复制到另一个元素
【发布时间】：2011-05-28 11:09:58
【问题描述】：

如何获得从元素 A 到元素 B 的所有样式（甚至是继承的）？在 javascript 中或使用 jquery。

让我们告诉我有一个元素 <p class="foo">...</p>，然后我添加了新元素 <div />，除了内容之外，它看起来是一样的。

【问题讨论】：

如果
在
内，它将自动继承 CSS..
（但是没有人会在
中放入

吗？ - 因为每个人都会验证他们的代码，所以他们已经发现了错误 ;-)
您可以使用addClass() 来添加新元素。

【解决方案1】：

如果你不关心 IE，那么你可以这样做：

var p = document.getElementById("your_p_id");
var div = document.createElement("div");
div.innerHTML = "your div content";
div.style.cssText = document.defaultView.getComputedStyle(p, "").cssText;

#your_p_id {
  color: #123124;
  background-color: #decbda;
}

&lt;textArea id="your_p_id"&gt;Hello world!&lt;/textArea&gt;

这适用于内联、嵌入和继承的样式。

编辑：“不关心 IE”当然是指“不关心 Webkit 以外的任何东西”。

更新：这适用于当前版本的 Chrome(19)、Safari(5)、Firefox(12) 和 IE(9)。 它也适用于某些旧版本，例如 IE8。

【讨论】：

您可能还需要添加类似：someElement.appendChild(div);
为什么不使用window.getComputedStyle 而不是document.defaultView，它指向同一件事？全局窗口变量的使用更为常见。
你能做一个测试用例吗？它对我没有任何作用（FF 33.1）。也许我期待它做一些它没有做的事情？
据developer.mozilla.org/en-US/docs/Web/API/Window/…报道：网上很多代码示例中，getComputedStyle都是从document.defaultView对象中使用的。在几乎所有情况下，这是不必要的，因为 getComputedStyle 也存在于 window 对象上。很可能 defaultView 模式是（1）不想为窗口编写规范的人和（2）制作在 Java 中也可用的 API 的某种组合。但是，有一种情况必须使用 defaultView 的方法：使用 Firefox 3.6 访问框架样式时。

【解决方案2】：

实际上，sdleihssirhc's answer 在 firefox 上不起作用，因为getComputedStyle(p, "").cssText 将返回一个空字符串，这是一个长期存在且已知的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=137687

同时支持 Firefox 的解决方案是迭代 getComputedStyle 属性并手动创建 CSS 字符串：

var clonedNode = document.createElement("div");
const styles = window.getComputedStyle(node);
if (styles.cssText !== '') {
    clonedNode.style.cssText = styles.cssText;
} else {
    const cssText = Object.values(styles).reduce(
        (css, propertyName) =>
            `${css}${propertyName}:${styles.getPropertyValue(
                propertyName
            )};`
    );

    clonedNode.style.cssText = cssText
}

【讨论】：

Object.values(styles) 在 Firefox (78.0.2) 上返回由 353 个元素组成的数组，在 Chrome (84.0.4147.125) 上返回 833 个元素，以及Safari (13.1.2) 上的 923 元素。 Array.from(styles) 在 Firefox、Chrome 和 Safari 上分别返回 353、317 和 491 元素，所以我建议更改为 @987654328 @.

【解决方案3】：

尝试像这样复制每个 CSS 属性：

$("#target").css("border", $("#source").css("border"));
$("#target").css("background", $("#source").css("background"));

#source {
  background-color: #dfeacb !important;
  color: #bbae4e !important;
  border: 1px solid green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textArea id="source">Hello world!</textArea>
<textArea id="target">Hello world!</textArea>

为什么不呢？您可以创建可能包含所有属性的字典。

【讨论】：

像这样做一次可能没问题，但是在循环中，这真的不聪明。由于您将每个属性分开并将其设置为分开。
如果元素已经是文档的一部分，这将特别慢。