CSS 用JavaScript复制一个元素（以及其样式）

在本文中，我们将介绍如何使用JavaScript来复制一个元素（包括其样式）。通过这种方法，我们可以动态地生成新的元素，而无需手动编写重复的CSS样式。

阅读更多：CSS 教程

使用cloneNode()方法复制元素

在JavaScript中，我们可以使用cloneNode()方法来复制一个元素。这个方法可以复制一个节点，并返回这个复制的节点。我们可以通过调用复制的节点的各种属性和方法来操作它。

下面的示例演示了如何使用cloneNode()方法复制一个div元素，并将其添加到文档中：

<!DOCTYPE html>
<html>
<head>
    <style>
        .original {
            background-color: red;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="original">Original div</div>

    <script>
        var originalDiv = document.querySelector('.original');
        var clonedDiv = originalDiv.cloneNode(true);
        clonedDiv.textContent = 'Cloned div';

        document.body.appendChild(clonedDiv);
    </script>
</body>
</html>

在上面的示例中，我们首先选择了一个class为”original”的div元素。然后，我们使用cloneNode(true)复制了这个元素，其中参数为true表示复制元素的所有子节点。接下来，我们将复制的div的文本内容修改为”Cloned div”。最后，我们通过appendChild()方法将复制的div添加到文档的body中。

运行上面的示例，你将看到一个原始的div元素和一个克隆的div元素，它们具有相同的样式。

复制样式

在上面的示例中，我们成功地复制了一个元素，包括它的文本内容。但是，克隆的元素并没有继承原始元素的样式。如果我们希望复制元素的样式，我们可以使用一些额外的代码来实现。

首先，我们可以使用getComputedStyle()方法获取原始元素的计算样式。然后，我们可以将这些样式应用于克隆的元素。

下面的示例演示了如何复制一个元素的样式：

<!DOCTYPE html>
<html>
<head>
    <style>
        .original {
            background-color: red;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="original">Original div</div>

    <script>
        var originalDiv = document.querySelector('.original');
        var clonedDiv = originalDiv.cloneNode(true);
        clonedDiv.textContent = 'Cloned div';

        var computedStyle = window.getComputedStyle(originalDiv);
        clonedDiv.style.backgroundColor = computedStyle.backgroundColor;
        clonedDiv.style.color = computedStyle.color;
        clonedDiv.style.padding = computedStyle.padding;

        document.body.appendChild(clonedDiv);
    </script>
</body>
</html>

在上面的示例中，我们首先获取了原始div的计算样式，然后将这些样式应用于克隆的div元素的backgroundColor、color和padding属性上。这样，克隆的div就具有了与原始div相同的样式。

运行上面的示例，你将看到两个div元素，它们的样式完全相同。