极客教程JavaScript 如何切换一个元素类
切换元素类别是指根据某个条件在HTML元素中添加和删除某个特定的类别。
例如，我们想高亮显示HTML div元素，当鼠标进入时，我们需要在HTML元素中添加一个具有不同风格的特定类。
在这里，我们将学习使用JavaScript和jQuery来切换元素类的各种方法。在本教程中，我们将学习如何在JavaScript中切换一个元素类。
使用classList的toggle()方法
toggle()方法可以切换元素中的类。它检查该类是否存在，然后删除该类；否则，它将该类添加到该元素中。
语法
用户可以按照下面的语法来使用toggle()方法，用JavaScript来切换一个元素的类。
divElement.classList.toggle("class_name");
在上面的语法中，divElement是一个HTML元素，我们想在其中切换作为toggle方法的参数传递的类。
例子1
在下面的例子中，我们已经创建了div元素并给出了一些样式。当用户点击按钮时，会调用toggleClass()函数。在toggleClass()函数中，我们使用了div元素的id来访问它。
之后，我们在div元素的classList上应用toggle()方法。classList属性以数组的形式返回所有div元素的类。此外，我们将 “color “类的名称作为toggle()方法的一个参数。因此，它将从div元素中添加和删除颜色类。
<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(), and 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 “类，将div转换成一个圆形。每当用户点击按钮时，toggleClass()函数就会检查div元素是否包含 “圆 “类。如果contains()方法对圆圈类的返回值为真，我们就使用classList的remove()方法将圆圈类从div中移除。否则，我们使用add()方法在div元素中添加’circle’类。
<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、类或标签来代替元素，以使用JQuery访问元素。class_name是为参考元素切换的类名。
例子3
在下面的例子中，我们通过使用JQuery的toggleClass()方法切换元素的text_color类来改变元素文本的颜色。
在输出中，用户可以观察到，每当他们按下按钮，它就会在红色和默认颜色之间切换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()方法。