添加/删除类（如果它存在于 JavaScript 中的元素上）

使用 JavaScript 删除元素上存在的类

要删除元素上存在的类，请选择该元素并将类名传递给方法classList.remove()，例如
box.classList.remove('bg-yellow').

remove()如果元素上不存在任何提供的类，该方法将忽略它们。

这是示例的 HTML。

索引.html


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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <div id="box" class="bg-yellow">Box 1</div>

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

这是相关的 JavaScript 代码。

索引.js


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

box.classList.remove('bg-yellow');

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

我们使用
classList.remove
方法删除元素上存在的类。

如果类不存在于元素上，该remove方法不会抛出错误，它只是忽略删除特定类的请求。

您可以通过复制从元素中删除类的行来测试这一点。

索引.js


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

box.classList.remove('bg-yellow');

// 👇️ has no effect because the class was already removed
box.classList.remove('bg-yellow');

您可以使用该remove()方法在一次调用中根据需要删除尽可能多的类。

如果元素上不存在任何类，它们将被忽略。

索引.js


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

box.classList.remove(
  'bg-yellow',
  'second-class',
  'third-class'
);

类似地，如果您需要将一个类添加到一个元素（如果它不存在），您可以使用该classList.add()方法。

索引.js


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

box.classList.remove(
  'bg-yellow',
  'second-class',
  'third-class'
);

box.classList.add(
  'first-class',
  'second-class'
);

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

如果类存在于元素集合中，则移除该类

classList.remove()请注意，必须在 DOM 元素上调用该方法。

如果您有一个元素集合，您需要从中删除一个类，则必须遍历该集合并在每个节点上调用该方法。

这是下一个示例的 HTML。

索引.html


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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

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

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

这是相关的 JavaScript 代码。

索引.js


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

for (const box of boxes) {
  box.classList.remove(
    'bg-yellow',
    'second-class',
    'third-class'
  );
}

我们使用该document.querySelectorAll方法来选择所有具有类的 DOM 元素box。

为了迭代元素，我们使用for...of循环并从集合中的每个元素中删除一个类。

如果使用 JavaScript 在 Element 上不存在，则添加一个类

To add a class if it doesn’t already exist on an element, select the element and
pass the class name to the classList.add() method.

The add() method will omit any classes that are already present on the
element.

Here is the HTML for the examples.

index.html


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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>

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

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

And here is the related JavaScript code.

index.js


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

box.classList.add('bg-yellow');

We selected the element using the document.getElementById() method.

We used the classList.add
method to add a class if it doesn’t already exist to the element.

If a class is already present on the element, it will be omitted. The add() method only adds classes that are not already contained in the element’s class list.

You can test this by duplicating the line that adds the class and inspecting the
element.

index.js


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

box.classList.add('bg-yellow');

// 👇️ has no effect because class already exists
box.classList.add('bg-yellow');

You can use the add() method to add as many classes as necessary to the
element and only the classes that are not already present on the Node will get
added.

index.js


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

box.classList.add(
  'bg-yellow',
  'second-class',
  'third-class'
);

Similarly, if you need to remove a class only if it exists on the element, you
can use the classList.remove() method.

index.js


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

box.classList.add(
  'bg-yellow',
  'second-class',
  'third-class'
);

box.classList.remove(
  'second-class',
  'third-class',
  'example'
);

If the provided class does not exist on the element, the remove() method does
not throw an error, instead, it simply ignores the class.

# Adding a class if it doesn’t exist to a collection of elements

Note that the classList.add() method has to be called on a DOM element, so if
you have a collection of elements you need to add a class to, you have to
iterate over the collection and call the method on each node.

Here is the HTML for the next example.

index.html


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

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </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>

And here is the related JavaScript code.

index.js


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

for (const box of boxes) {
  box.classList.add('bg-yellow', 'second-class', 'third-class');

  box.classList.remove('second-class', 'third-class', 'example');
}

我们使用该document.querySelectorAll方法来选择所有具有类的 DOM 元素box。

为了迭代元素，我们使用for...of循环并为集合中的每个元素添加一个类。

添加/删除类（如果它存在于 JavaScript 中的元素上）

目录

Remove class if it exists on Element using JavaScript

使用 JavaScript 删除元素上存在的类

如果类存在于元素集合中，则移除该类

如果使用 JavaScript 在 Element 上不存在，则添加一个类

# Adding a class if it doesn’t exist to a collection of elements