使用 JavaScript 向元素添加多个类
要向元素添加多个类，请选择该元素并将多个类传递给 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');
我们使用 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');
}
我们使用 document.querySelectorAll 方法来选择 DOM 中的所有元素，其中包含一类框。
我们使用 for...of 循环遍历集合并为每个元素添加多个类。
相关文章
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.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
