切换元素类意味着根据特定条件从 HTML 元素中添加和删除特定类。
例如，我们要突出显示 HTML div 元素，当鼠标进入时，我们需要在 HTML 元素中添加具有不同样式的特定类。
在这里，我们将学习使用 JavaScript 和 jQuery 切换元素类的各种方法。在本教程中，我们将学习在 JavaScript 中切换元素类。
使用classList的toggle()方法
toggle() 方法切换元素中的类。它检查该类是否存在，然后删除该类；否则，它将类添加到元素中。
立即学习“Java免费学习笔记（深入）”；
语法
用户可以按照以下语法使用toggle()方法通过JavaScript切换元素类。
divElement.classList.toggle("class_name");
在上面的语法中，divElement 是一个 HTML 元素，我们想要在其中切换作为切换方法的参数传递的类。
示例 1
在下面的示例中，我们创建了 div 元素并给出了一些样式。当用户单击该按钮时，它会调用toggleClass() 函数。在toggleClass()函数中，我们使用div元素的id访问了它。
之后，我们将toggle()方法应用到div元素的classList上。 classList 属性以数组格式返回所有 div 元素的类。此外，我们还传递了“color”类名作为toggle()方法的参数。因此，它将在 div 元素中添加和删除颜色类。
Using the toggle() method to toggle and element class using JavaScript.
Click the below button to add and remove the class from the below div.
在上面的输出中，用户可以观察到，当我们单击按钮时，它会更改 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”类，它将 div 转换为圆形。每当用户单击按钮时，toggleClass() 函数都会检查 div 元素是否包含“circle”类。如果 contains() 方法对 Circle 类返回 true，我们将使用带有 classList 的 remove() 方法从 div 中删除 Circle 类。否则，我们使用 add() 方法在 div 元素中添加“circle”类。
Using the contains(), add(), and remove() method to toggle and element class using JavaScript.
Click the below button to add and remove the circle class from the below div.
Square
在上面的输出中，用户只要单击按钮就可以观察到 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 元素的文本颜色。
Using the JQuery's toggleClass() method to toggle and element class using JQUery.
Click the below button toggle text_color class from the below span element.
This is a sample text.
我们学习了使用 JavaScript 和 JQuery 切换元素类的三种方法。当用户想要在 JavaScript 中编写代码时，可以使用toggle() 方法；当用户想要使用JQuery 编写代码时，可以使用toggleClass() 方法。
