动态样式化网页对于创建引人入胜的用户体验至关重要。JavaScript 提供了强大的工具来操作 CSS 类，从而实现交互式元素和响应式设计。本文探讨了在 JavaScript 中修改 CSS 类的最有效方法。
目录
使用 classList.add() 添加 CSS 类
classList.add() 方法可以优雅地为元素添加一个新类。如果该类已经存在，则会被忽略，从而防止重复。这确保了类管理的简洁性和可预测性。
const myElement = document.getElementById("myElement");
myElement.classList.add("newClass");
此代码片段将“newClass”添加到 ID 为“myElement”的元素。如果“myElement”已经拥有类“existingClass1 existingClass2”，则它将变为“existingClass1 existingClass2 newClass”。
使用 classList.remove() 删除 CSS 类
classList.remove() 可以高效地从元素中删除指定的类。如果该类不存在，则该方法会静默地不做任何操作，避免错误。
const myElement = document.getElementById("myElement");
myElement.classList.remove("existingClass");
这将从“myElement”中删除“existingClass”。
使用 classList.toggle() 切换 CSS 类
classList.toggle() 提供了一种简洁的方法来根据类的当前存在与否添加或删除类。这非常适合显示/隐藏元素或在状态之间切换等场景。
const myElement = document.getElementById("myElement");
myElement.classList.toggle("active");
如果“active”不存在则添加它，如果存在则删除它。
直接操作 className 属性
虽然可以，但直接操作className属性（例如，myElement.className = "newClass";）通常不太推荐。这种方法会替换整个类列表，可能会覆盖其他重要的类。它缺乏classList方法提供的细粒度控制。
实际示例：切换按钮
让我们创建一个按钮，每次点击时都会改变其外观：
<button id="myButton">点击我</button>
<style>
.active {
background-color: green;
color: white;
}
</style>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
button.classList.toggle("active");
});
</script>
这段代码添加了一个事件监听器。每次点击都会切换“active”类，从而改变按钮的样式。
通过掌握classList.add()、classList.remove()和classList.toggle()，您可以高效地管理 JavaScript 中的 CSS 类，创建动态和交互式的 Web 应用程序。除非绝对必要用于更简单的案例，否则避免直接操作className。