首頁 >web前端 >js教程 >如何在 JavaScript 中切換元素類別？

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

WBOY轉載: 2023-08-24 17:29:131098瀏覽

如何在 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中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 JavaScript Fetch API 取得資料？下一篇：如何使用 JavaScript Fetch API 取得資料？

看更多