將所有樣式從一個元素復制到另一個元素

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 字符串：

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
}

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>

為什么不？ 您可以創建可能包含所有屬性的字典。