CSS 原生 JavaScript: 是否有一种方法可以在一条语句中切换多个 CSS 类
在本文中，我们将介绍如何使用原生 JavaScript 在一条语句中切换多个 CSS 类。我们将探讨两种主要方式来实现这一目标：使用classList属性和使用className属性。
阅读更多：CSS 教程
使用classList属性切换多个CSS类
classList是DOM元素的属性之一，它提供了一组方法来访问和操作元素的类名。我们可以使用classList的add、remove、toggle和replace方法来切换CSS类。
add方法
add方法用于将一个或多个类名添加到元素的类名列表中。如果类名已经存在，则会被忽略。
const element = document.getElementById("myElement");
element.classList.add("class1", "class2", "class3");
在上面的示例中，我们将class1、class2和class3添加到id为myElement的元素的类名列表中。
remove方法
remove方法用于从元素的类名列表中移除一个或多个类名。如果类名不存在，则会被忽略。
const element = document.getElementById("myElement");
element.classList.remove("class1", "class2", "class3");
在上面的示例中，我们从id为myElement的元素的类名列表中移除class1、class2和class3。
toggle方法
toggle方法用于在元素的类名列表中切换一个或多个类名。如果类名已经存在，则移除它；如果类名不存在，则添加它。
const element = document.getElementById("myElement");
element.classList.toggle("class1");
element.classList.toggle("class2");
在上面的示例中，如果id为myElement的元素没有class1，则添加它；如果有，则移除它。同样，如果没有class2，则添加它；如果有，则移除它。
replace方法
replace方法用于将一个类名替换为另一个类名。
const element = document.getElementById("myElement");
element.classList.replace("class1", "class2");
在上面的示例中，如果id为myElement的元素有class1，则将其替换为class2。
使用className属性切换多个CSS类
除了使用classList属性，我们还可以使用className属性来切换多个CSS类。className属性返回元素的类名作为一个字符串，并且可以直接修改这个字符串来切换CSS类。
const element = document.getElementById("myElement");
element.className = "class1 class2 class3";
在上面的示例中，我们将class1、class2和class3设置为id为myElement的元素的类名。
示例
接下来，我们以一个实际的例子来演示如何在一条语句中切换多个CSS类。
<!DOCTYPE html>
<html>
<head>
<style>
.active {
color: red;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myElement">Hello, World!</div>
<button onclick="toggleClasses()">Toggle Classes</button>
<script>
function toggleClasses() {
const element = document.getElementById("myElement");
element.classList.toggle("active");
element.classList.toggle("highlight");
}
</script>
</body>
</html>
在上面的示例中，我们定义了两个CSS类：active和highlight。当点击按钮时，toggleClasses函数会在id为myElement的元素上切换这两个类。如果类名不存在，则添加它；如果类名已经存在，则移除它。
总结
使用原生 JavaScript，我们可以使用classList属性或className属性在一条语句中切换多个CSS类。classList属性提供了一组方法来添加、移除、切换和替换类名，而className属性允许直接修改元素的类名字符串。通过这两种方式，我们可以轻松地切换元素的样式，从而实现更丰富的用户界面效果。
此处评论已关闭