使用 JS 将所有样式从一个元素复制到另一个元素
使用 JS 将所有样式从一个元素复制到另一个元素：
- 使用 方法创建另一个元素。
- 获取包含原始元素样式的字符串。
- 在新创建的元素上将 CSS 字符串指定为 。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#box {
font-size: 2rem;
color: white;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="box" style="background-color: salmon; width: 150px; height: 150px">
Box content
</div>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const box = document.getElementById('box');
// 👇️ Create another element
const another = document.createElement('div');
another.innerHTML = 'Another content';
// 👇️ Get computed styles of original element
const styles = window.getComputedStyle(box);
let cssText = styles.cssText;
if (!cssText) {
cssText = Array.from(styles).reduce((str, property) => {
return `${str}${property}:${styles.getPropertyValue(property)};`;
}, '');
}
// 👇️ Assign css styles to element
another.style.cssText = cssText;
// 👇️ (optionally) add the element to the DOM
document.body.appendChild(another);
我们使用 方法创建了一个 div 元素。
方法返回一个包含元素所有 CSS 属性值的对象。
我们使用了 方法而不是 style 属性，因为 方法考虑了外部样式表并解析了值中包含的计算。
cssText 属性返回元素样式的文本，但并非所有浏览器都支持，有时会返回空字符串。
如果不支持该属性，我们将遍历计算出的样式以手动创建包含元素样式的字符串。
我们传递给 方法的函数被数组中的每个元素（CSS 样式属性名称）调用。
我们传递了一个空字符串作为 str 变量的初始值。
在每次迭代中，我们将当前 CSS 属性名称及其值附加到累积的字符串中并返回结果。
我们从回调函数返回的值在下一次迭代中作为 str 变量传递。
在最后一次迭代之后，cssText 变量包含一个包含原始元素所有样式的字符串。
最后一步是将字符串分配给元素的 style.cssText 属性。
我们可以选择使用 方法将节点添加到调用该方法的元素的子元素列表的末尾。
在示例中，我们在 body 元素上调用了 方法，但这可以是任何其他节点。
如果我打开上面示例中的页面，我可以看到第一个元素的样式已成功应用到第二个元素。
这些元素在我的浏览器中看起来完全相同。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。
