Javascript 将所有样式从一个元素复制到另一个元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4493449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Copy all styles from one element to another
提问by jney
How can i get every styles (even inherited) from an element A to an element B ? in javascript or using jquery.
如何从元素 A 到元素 B 获取所有样式(甚至继承)?在 javascript 中或使用 jquery。
let's tell i have an element <p class="foo">...</p>
and i append new element <div />
which would look like the same, except content.
让我们告诉我有一个元素<p class="foo">...</p>
,我附加<div />
了一个看起来一样的新元素,除了内容。
回答by sdleihssirhc
If you don't care about IE, then you can do this:
如果你不关心 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>
This works for inline, embedded, and inherited styles.
这适用于内联、嵌入和继承的样式。
EDIT:And by "don't care about IE," I of course meant "don't care about anything except Webkit."
编辑:“不关心 IE”,我的意思当然是“不关心 Webkit 以外的任何东西”。
UPDATE:This works in the current versions of Chrome(19), Safari(5), Firefox(12), and IE(9). It also works in older versions of some, such as IE8.
更新:这适用于当前版本的 Chrome(19)、Safari(5)、Firefox(12) 和 IE(9)。它也适用于某些旧版本,例如 IE8。
回答by Thibaut
Actually, sdleihssirhc's answerwill not work on firefox as getComputedStyle(p, "").cssText
will return an empty string, it's a longstanding and know bug: https://bugzilla.mozilla.org/show_bug.cgi?id=137687
实际上,sdleihssirhc 的答案在 Firefox 上不起作用,因为getComputedStyle(p, "").cssText
它将返回一个空字符串,这是一个长期存在且已知的错误:https: //bugzilla.mozilla.org/show_bug.cgi?id=137687
The solution to also support Firefox is to iterate on getComputedStyle
properties and create the CSS string manually:
支持 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
}
回答by Jean Louis
Try to copy every CSS-properties like this:
尝试像这样复制每个 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>
Why not? you can create the dictionary that may consists of all properties.
为什么不?您可以创建可能包含所有属性的字典。