如何在 JavaScript 中檢查給定元素是否具有指定的類別？-js教程-PHP中文網

概述

文法

演算法

範例1：當元素包含指定類別時

範例2：當元素不包含指定類別時

結論

" >結論

首頁

web前端

js教程

如何在 JavaScript 中檢查給定元素是否具有指定的類別？

王林

Sep 08, 2023 am 08:49 AM

如何在 JavaScript 中检查给定元素是否具有指定的类？

概述

要先執行某個任務，我們需要透過其類別或 ID 來存取該特定元素，因此在存取該元素之前，我們檢查該類別是否存在於該特定元素中。 classList 物件包含 JavScript 中的內建方法 classList.contains()。此方法確定給定元素是否屬於指定類別。整個過程將會發生，因為首先我們必須透過 getElementById()、getElementsByClassName() 或任何其他方法存取該元素。訪問它後，我們必須使用 classList.contains() 方法檢查該類別。

文法

這個問題使用的語法是 -

classList.contains(className);

登入後複製

classList - 這是 JavaScript 中的一個對象，它接收特定元素中包含的類別的陣列。
contains - 這是 classList 物件的一個方法，它檢查指定的類別是否存在於給定元素中。
className - 這是我們必須在給定元素中搜尋的指定名稱。

演算法

步驟 1 - 在 body 標籤內建立一些 HTML 元素。為每個元素指定一些類別。
步驟 2 - 在 HTML 按鈕中指定 onclick() 事件方法。
第 3 步 - 建立 JavaScript 箭頭函數。存取任何 HTML 並將其儲存在變數中。
步驟 4 - 使用 classList 物件的 contains() 方法。將變數作為參數傳遞到 contains() 方法。
步驟 5 - 如果傳回 true，則 HTML 元素中存在特定類，否則如果傳回 false，則元素中不存在特定類別。

範例1：當元素包含指定類別時

我們在 body 標籤中使用了“

”標籤，其中包含類別名稱：class =“my-para first lorems”，所以這些是類別名稱。我們的任務是檢查元素以查看它是否包含指定的元素。為此，我們使用了 contains() 方法，它是 classList 物件的方法。因此，我們要檢查的類別作為參數傳遞到“contains()”方法中，該方法檢查類別的確定性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check for specified class in a given element</title>
   <style>
      body{
         background-color: #0a0a0a;
         color: white;
      }
   </style>
</head>
   <body>
      <p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
      <button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
      <div id="output" style="display: inline-block; padding: 0.3rem;"></div>
      
      <script>
         check = () => {
            var ptag = document.getElementById("para");
            var cl = ptag.classList;
            var clContain = cl.contains("my-para");
      
            if (clContain) {
               document.getElementById("output").innerHTML += "Element contains specified  class";
               document.getElementById("output").style.background = "green";
               document.getElementById("output").style.color = "white";
            } else {
               document.getElementById("output").innerHTML += "Element does not contains the specified class";
               document.getElementById("output").style.background = "tomato";
               document.getElementById("output").style.color = "white";
            }
         }
      
      </script>
   </body>
</html>

登入後複製

上述範例的輸出，因為「Elements contains specified class」的輸出為 true。

範例2：當元素不包含指定類別時

下圖顯示“Element 不包含指定的類別”，這意味著當檢查 classList.contains() 時，它一定傳回了 false。因此錯誤條件已終止。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check for pecified class in a given element</title>
   <style>
      body{
         background-color: #0a0a0a;
         color: white;
      }
   </style>
</head>
   <body>
      <p id="para" class="my-para first lorems">I am para with certain classes, check now.</p>
      <button onclick="check()" style="margin-bottom: 8px;">Check Now</button><br>
      <div id="output" style="display: inline-block; padding: 0.3rem;"></div>

      <script>
         check = () => {
            var ptag = document.getElementById("para");
            var cl = ptag.classList;
            var clContain = cl.contains("mypara");
      
            if (clContain) {
               document.getElementById("output").innerHTML += "Element contains specified  class";
               document.getElementById("output").style.background = "green";
               document.getElementById("output").style.color = "white";
            } else {
               document.getElementById("output").innerHTML += "Element does not contains the specified class";
               document.getElementById("output").style.background = "tomato";
               document.getElementById("output").style.color = "white";
            }
         }
      </script>
   </body>
</html>

登入後複製

結論

classList的回傳類型是DOMTokenList，它是一個陣列型別。它包含該特定元素中存在的類別的列表。可以透過使用任何 for 迴圈或映射對其進行迭代來查看 DOMTokenList。

var ptag = document.getElementById("para").classList;
ptag.forEach(element => {
   console.log(element);
});

登入後複製

「contains()」方法傳回布林類型的結果，為 true 或 false。 classList 物件包含類別的陣列。因此，當 contains() 方法檢查指定的類別時，它會檢查 DOMTokenList，並代表它做出決定並傳回 true 或 false。

以上是如何在 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信箱登陸入口在哪裡

7716

Java教學

1641

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1232

Related knowledge

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

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

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

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