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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 12:38:23  来源:igfitidea点击:

Copy all styles from one element to another

javascriptjquerycss

提问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, "").cssTextwill 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 getComputedStyleproperties 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.

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