資料結構
網路
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+ 閱讀量
