使用 JavaScript 向元素添加多个类

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

Vue React JavaScript Angular CSS HTML

使用 JavaScript 向元素添加多个类

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

要向元素添加多个类，请选择该元素并将多个类传递给 classList.add() 方法，例如 box.classList.add('bg-blue', 'text-white')。 add() 方法接受一个或多个类并将它们添加到元素中。

以下是本文示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-blue {
        background-color: blue;
      }

      .text-white {
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

下面是 JavaScript 代码

const box = document.getElementById('box');

// ✅ Add multiple classes
box.classList.add('bg-blue', 'text-white');

// ✅ Remove multiple classes
box.classList.remove('first-class', 'second-class');

JavaScript 向元素添加多个类

我们使用 document.getElementById() 方法选择了元素。

然后我们使用 classList.add 方法向元素添加多个类。

如果一个类已经存在于元素上，它将被省略。 add() 方法只添加尚未包含在元素的类列表中的类。

我们可以将一个或多个类传递给 add() 方法，但如果我们传递一个空字符串参数或包含空格的参数，该方法将抛出错误。

如果需要从元素中删除一个或多个类，请使用 classList.remove() 方法。该方法将一个或多个类名作为参数并将它们从元素中移除。

必须在 DOM 元素上调用 classList.add() 方法。如果我们有一个元素集合，请对其进行迭代并在每个元素上调用该方法。

这是下一个示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-blue {
        background-color: blue;
      }

      .text-white {
        color: white;
      }
    </style>
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

下面是 JavaScript 代码

const boxes = document.querySelectorAll('.box');

for (const box of boxes) {
  // ✅ Add multiple classes
  box.classList.add('bg-blue', 'text-white');

  // ✅ Remove multiple classes
  box.classList.remove('first-class', 'second-class');
}