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

当前位置：主页 > 学无止境 > WEB前端 >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2022/12/23 浏览次数：

使用 JS 将所有样式从一个元素复制到另一个元素：

使用 document.createElement() 方法创建另一个元素。
获取包含原始元素样式的字符串。
在新创建的元素上将 CSS 字符串指定为 cssText。

以下是本文示例的 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);

我们使用 createElement 方法创建了一个 div 元素。

window.getComputedStyle 方法返回一个包含元素所有 CSS 属性值的对象。

我们使用了 getComputedStyle 方法而不是 style 属性，因为 getComputedStyle 方法考虑了外部样式表并解析了值中包含的计算。

cssText 属性返回元素样式的文本，但并非所有浏览器都支持，有时会返回空字符串。

如果不支持该属性，我们将遍历计算出的样式以手动创建包含元素样式的字符串。

我们传递给 Array.reduce 方法的函数被数组中的每个元素（CSS 样式属性名称）调用。

我们传递了一个空字符串作为 str 变量的初始值。

在每次迭代中，我们将当前 CSS 属性名称及其值附加到累积的字符串中并返回结果。

我们从回调函数返回的值在下一次迭代中作为 str 变量传递。

在最后一次迭代之后，cssText 变量包含一个包含原始元素所有样式的字符串。

最后一步是将字符串分配给元素的 style.cssText 属性。

我们可以选择使用 appendChild 方法将节点添加到调用该方法的元素的子元素列表的末尾。

在示例中，我们在 body 元素上调用了 appendChild 方法，但这可以是任何其他节点。

如果我打开上面示例中的页面，我可以看到第一个元素的样式已成功应用到第二个元素。

JavaScript 应用于其他元素的样式

这些元素在我的浏览器中看起来完全相同。

JavaScript 元素看起来相同

上一篇：在 JS 中将对象数组转换为值数组

下一篇：使用JS将字符串中的下划线替换为空格

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.