数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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() 函数中，我们使用其 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 元素切换 color 类。
使用 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”类。
<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() 方法为<span>元素切换 text_color 类来更改<span>元素文本的颜色。
在输出中，用户可以观察到，每当他们按下按钮时，它都会在红色和默认颜色之间切换 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() 方法。
5K+ 阅读量
