HTML DOM classList用法及代碼示例

classList屬性是一個隻讀屬性。此屬性使用“classList.length”屬性，該屬性以DOMTokenlist(以空格分隔的標記集)的形式返回元素的類名稱。但是，此屬性是在元素上使用添加，刪除和切換CSS類。

注意：IE9和更早版本不支持classList屬性。
用法:

  const elementClasses = elementNodeReference.classList;

方法：

add(class1，class2，…)：向元素添加一個以上的類。如果元素的class屬性中已經存在上述類，則將其忽略。
remove(class1，class2，…)：從element中刪除指定的類。不存在的類不會引發錯誤。
contains(class)：檢查元素的class屬性中是否存在指定的class值。相應地返回布爾值。
item(index)：這將按類別集合中的索引返回類別值。如果索引超出範圍，則返回null。
toggle(class, force)：在元素的類名之間切換。
1. 第一個參數從元素中刪除指定的類，並返回false。如果類不存在，則將類添加到元素中，並返回true。
2. 可選的第二個參數是一個布爾值，用於強製添加或刪除該類。當存在第二個參數且其值為true時，添加指定的類值，如果其值為false，則強製刪除指定的類，無論該類是否存在。

示例1：添加和刪除類。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM classList Property 
    </title> 
    <style> 
        .mystyle { 
            align:center; 
            border:1px solid black; 
            height:100px; 
            padding-top:35px; 
            background:lightgreen; 
            color:Black; 
            font-size:70px; 
        } 
    </style> 
  
</head> 
  
<body> 
  
    <p> 
      Click the buttons to see the add and 
      remove of "mystyle" class to DIV. 
    </p> 
  
    <button onclick="myFunction()"> 
      Add class 
    </button> 
  
    <div id="myDIV"> 
        GeeksforGeeks 
    </div> 
  
    <script> 
        function myFunction() { 
  
            document.getElementById( 
                "myDIV").classList.add("mystyle"); 
  
        } 
  
        function Remove() { 
            document.getElementById( 
                "myDIV").classList.remove("mystyle"); 
        } 
    </script> 
  
    <button onclick="Remove()">Remove class</button> 
  
</body> 
  
</html>

輸出：

在添加課程之前
點擊添加課程按鈕後
單擊刪除課程按鈕後

示例2：在課程之間切換

<!DOCTYPE html> 
  
<html> 
  
<head> 
    <title> 
        HTML | DOM classList Property 
    </title> 
  
    <style> 
        .mystyle { 
            align:center; 
            border:1px solid black; 
            height:100px; 
            padding-top:35px; 
            background:lightgreen; 
            color:Black; 
            font-size:70px; 
        } 
          
        .newClassName { 
            align:center; 
            border:1px solid black; 
            height:50px; 
            padding-top:35px; 
            background:green; 
            color:white; 
            font-size:50px; 
        } 
    </style> 
  
</head> 
  
<body> 
  
    <p> 
      Click the buttons to see the add and 
      remove of "mystyle" class to DIV.  
    </p> 
  
    <button onclick="myFunction()"> 
        toggle 
    </button> 
  
    <div id="myDIV" class="mystyle"> 
        GeeksforGeeks 
    </div> 
  
    <script> 
        function myFunction() { 
  
            document.getElementById( 
                "myDIV").classList.toggle("newClassName"); 
  
        } 
    </script> 
  
</body> 
  
</html>

輸出：

切換之前
切換後

示例3：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM classList Property 
    </title> 
    <style> 
        .mystyle { 
            width:500px; 
            height:50px; 
        } 
          
        .anotherClass { 
            background-color:lightGreen; 
        } 
          
        .thirdClass { 
            text-align:center; 
            font-size:25px; 
            color:black; 
            margin-bottom:10px; 
        } 
    </style> 
  
</head> 
  
<body> 
  
    <div id="myDIV" class="mystyle anotherClass thirdClass"> 
  
        GeeksforGeeks 
  
    </div> 
  
    <button onclick="myFunction()"> 
        click to count the classes 
    </button> 
  
    <p id="demo"></p> 
  
    <script> 
        function myFunction() { 
  
            var x = document.getElementById( 
                "myDIV").classList.length; 
  
            document.getElementById("demo").innerHTML = x; 
  
        } 
    </script> 
  
</body> 
  
</html>

輸出：

點擊之前
點擊後

支持的瀏覽器：DOM classList屬性支持的瀏覽器如下：

穀歌瀏覽器8.0
Internet Explorer 10.0
火狐3.6
Opera 11.5
Safari 5.1

相關用法

注：本文由純淨天空篩選整理自ashishsaini3大神的英文原創作品 HTML | DOM classList Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。