CSS 使用 document.createElement(‘div’) 创建带类名的元素

在本文中，我们将介绍如何使用 CSS 创建一个带有类名的元素，可以通过 JavaScript 的 document.createElement() 方法来实现。

阅读更多：CSS 教程

使用 document.createElement() 创建元素

document.createElement() 是 JavaScript 中一个用于创建新的 HTML 元素的方法。通过这个方法，我们可以在 DOM 中动态地创建新的元素节点，并将其添加到指定的位置。

下面是一个使用 document.createElement() 创建新的 <div> 元素的示例代码：

const div = document.createElement('div');

以上代码将创建一个新的 <div> 元素并将其赋值给变量 div。

为元素添加类名

要为创建的元素添加类名，我们可以使用元素节点的 .classList.add() 方法。该方法可以向元素节点的 class 属性中添加一个或多个类名。

以下是一个示例代码，演示如何为新创建的 <div> 元素添加类名：

div.classList.add('my-class');

以上代码将为新的 <div> 元素添加一个类名为 'my-class'。

示例

下面是一个完整的示例，展示如何使用 document.createElement('div') 创建一个带有类名的元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-class {
      background-color: yellow;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>

  <script>
    const div = document.createElement('div');
    div.classList.add('my-class');
    document.body.appendChild(div);
  </script>
</body>
</html>

在上面的示例中，我们在 <head> 标签中定义了一个 CSS 样式，类名为 'my-class' 的元素将有黄色的背景，并具有宽度和高度为 200 像素。

在 <script> 标签中，我们使用 document.createElement() 创建了一个新的 <div> 元素，并为其添加了类名 'my-class'，最后通过 document.body.appendChild() 方法将元素添加到 <body> 中。

当你在浏览器中打开上述示例代码时，你将会看到一个黄色的盒子，宽高为 200 像素，正是我们动态地创建的带有类名的 <div> 元素。