极客笔记如何在JavaScript中切换元素类
切换元素类意味着根据某个条件在HTML元素中添加和删除特定的类。
例如，我们想要突出显示HTML div元素，在鼠标进入时，需要在HTML元素中添加一个具有不同样式的特定类。
在这里，我们将学习使用JavaScript和jQuery切换元素类的各种方法。在本教程中，我们将学习如何在JavaScript中切换元素类。
使用classList的toggle()方法
toggle()方法在元素中切换类。它检查类是否存在，若存在，则删除该类；否则，将该类添加到元素中。
语法
用户可以按照下面的语法使用toggle()方法来在JavaScript中切换元素类。
divElement.classList.toggle("class_name");
在上述语法中，divElement是我们想要切换为参数传递的类的HTML元素。
示例1
在下面的示例中，我们创建了div元素并添加了一些样式。当用户点击按钮时，它会调用toggleClass()函数。在toggleClass()函数中，我们使用id访问了div元素。
之后，我们在div元素的classList属性上应用toggle()方法。classList属性以数组格式返回div元素的所有类名。此外，我们将“color”类名作为toggle()方法的参数传递。因此，它将向div元素添加和移除color类。
<html>
<head>
<style>
div {
width: 10rem;
height: 10rem;
border: 2px solid blue;
border-radius: 12px;
}
.color {
background-color: grey;
}
</style>
</head>
<body>
<h2>Using the <i> toggle() method </i> to toggle and element class using JavaScript.</h2>
<h3>Click the below button to add and remove the class from the below div.</h3>
<div id="div-ele"></div>
<br>
<button onClick="toggleClass()">Toggle color class</button>
<script>
function toggleClass() {
let divElement = document.getElementById('div-ele');
divElement.classList.toggle("color");
}
</script>
</body>
</html>
在上面的输出中，用户可以观察到在点击按钮时，它会更改div元素的背景颜色，因为它切换了div元素的颜色类。
使用contains()、add()和remove()方法
contains()方法用于检查数组是否包含特定元素。add()方法将类添加到元素中，而remove()方法将类从元素中移除。
我们可以使用classList属性获取元素包含的所有类，然后可以使用contains()方法来检查元素是否包含特定类。如果不包含该类，我们可以添加它；否则，我们需要将该类移除。
语法
用户可以按照下面的语法使用contains()、add()和remove()方法来切换元素的类。
if (divElement.classList.contains("class_name")) {
divElement.classList.remove("circle");
} else {
divElement.classList.add("circle");
}
在上面的语法中，我们使用contains()方法来检查classList是否包含class_name类，根据结果，我们向元素添加或删除类。
示例2
在下面的示例中，我们为div元素设置了一些样式。此外，我们创建了一个名为’circle’的class，将div转换为圆形。当用户点击按钮时，toggleClass()函数会检查div元素是否包含’circle’类。如果contains()方法对于circle类返回true，我们使用remove()方法和classList从div中删除circle类。否则，我们使用add()方法将’circle’类添加到div元素中。
<html>
<head>
<style>
div {
width: 10rem;
height: 10rem;
border: 2px solid yellow;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: larger;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Using the <i> contains(), add(), and remove() method </i> to toggle and element class using JavaScript. </h2>
<h3>Click the below button to add and remove the circle class from the below div. </h3>
<div id="div-ele">
Square
</div>
<br>
<button onClick="toggleClass()">Toggle color class</button>
<script>
function toggleClass() {
let divElement = document.getElementById('div-ele');
let allClass = divElement.classList;
// if the element contains the circle class, remove it; Otherwise, add it.
if (allClass.contains("circle")) {
divElement.classList.remove("circle");
divElement.innerHTML = "Square";
} else {
divElement.classList.add("circle");
divElement.innerHTML = "Circle";
}
}
</script>
</body>
</html>
在上面的输出中，用户可以观察到在点击按钮时div元素在圆形和正方形形状之间切换。
使用JQuery的toggleClass()方法
JQuery包含了toggleClass()方法，其与JavaScript的toggle()方法相同。我们可以将HTML元素作为toggleClass()方法的参考，并将类名作为参数传递。
语法
用户可以按照以下语法来使用JQuery的toggleClass()方法来切换元素的类名。
$(element).toggleClass("class_name");
在上述语法中，用户应该使用一个元素 id、class 或标签来访问元素，使用 JQuery。class_name 是参考元素的 class 名称。
示例3
在下面的示例中，我们通过使用 JQuery 的 toggleClass() 方法为 元素切换 text_color class 来改变文本的颜色。
在输出中，用户可以观察到每当他们按下按钮时，它会在红色和默认颜色之间切换 span 元素的文本颜色。
<html>
<head>
<style>
.text_color {
color: red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> JQuery's toggleClass() method </i> to toggle and element class using JQUery. </h2>
<h3>Click the below button toggle text_color class from the below span element.</h3>
<span>This is a sample text.</span>
<br>
<br>
<button onClick="toggleClass()">Toggle color class</button>
<script>
function toggleClass() {
$("span").toggleClass("text_color");
}
</script>
</body>
</html>
我们学习了三种使用JavaScript和JQuery来切换元素类的方法。用户可以在想要使用JavaScript编写代码时使用toggle()方法，而在想要使用JQuery编写代码时使用toggleClass()方法。