Question

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

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

Answer 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;
}

<textArea id="your_p_id">Hello world!</textArea>

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

编辑：并且通过“不关心IE”，我当然意味着“除了Webkit之外什么都不关心。”

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

Answer 2

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

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

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
}

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

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

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

3 个答案: