如何在 JavaScript 中切換元素類別？-js教程-PHP中文網

使用classList的toggle()方法

文法

範例 3

使用 contains()、add() 和 remove() 方法

使用JQuery的toggleClass()方法

首頁

web前端

js教程

如何在 JavaScript 中切換元素類別？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 05:29 PM

如何在 JavaScript 中切换元素类？

切換元素類別意味著根據特定條件從 HTML 元素中新增和刪除特定類別。

例如，我們要突出顯示 HTML div 元素，當滑鼠進入時，我們需要在 HTML 元素中新增具有不同樣式的特定類別。

在這裡，我們將學習使用 JavaScript 和 jQuery 切換元素類別的各種方法。在本教程中，我們將學習在 JavaScript 中切換元素類別。

使用classList的toggle()方法

toggle() 方法切換元素中的類別。它檢查該類別是否存在，然後刪除該類別；否則，它將類別新增到元素中。

文法

使用者可以依照下列語法使用toggle()方法透過JavaScript切換元素類別。

divElement.classList.toggle("class_name");

登入後複製

在上面的語法中，divElement 是一個 HTML 元素，我們想要在其中切換作為切換方法的參數傳遞的類別。

範例 1

在下面的範例中，我們建立了 div 元素並給出了一些樣式。當使用者單擊該按鈕時，它會呼叫toggleClass() 函數。在toggleClass()函數中，我們使用div元素的id訪問了它。

之後，我們將toggle()方法套用到div元素的classList上。 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() 和 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() 方法切換元素的 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() 方法。

以上是如何在 JavaScript 中切換元素類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1237

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。