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

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的答案不适用于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>

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