HTML - DOM classList 屬性

上一頁
下一頁

HTML DOM 的classList 屬性是一個只讀屬性，它提供了一種訪問和操作 HTML 元素類列表的方法。

此屬性返回一個包含指定元素類的DOMTokenList 物件，使您可以輕鬆地新增、刪除、切換和檢查類的存在。

語法

以下是 HTML DOM 的classList 屬性的語法：

element.classList;

引數

由於它是一個屬性，因此不接受任何引數。

返回值

此屬性返回一個 DOMTokenList 物件，該物件表示元素的 class 屬性中的一組類名。

屬性和方法

以下列出了您可以用來向列表中新增、切換或刪除 CSS 類的屬性和方法：

方法/屬性 描述
add() 透過新增一個或多個類來修改元素的 classList。
remove() 透過刪除一個或多個類來修改元素的 classList。
toggle() 透過切換類開啟或關閉來修改元素的 classList。
contains() 檢查元素的 classList 是否包含特定類。
item() 訪問元素的 classList 中特定索引處的類。
replace() 替換元素的 classList 中的一個類為另一個類。
entries() 返回一個物件，該物件以鍵值對的形式迭代類列表。
keys() 返回一個物件，該物件迭代類列表的每個索引。
values() 返回一個物件，該物件允許迭代類列表的值（類名）。
forEach() 對 classList 中的每個類執行給定的函式一次。
length 返回元素的 classList 中的類數。

示例 1：向“div”元素新增新類

以下程式演示了 HTML DOM 的classList 屬性的用法。它向一個<div> 元素新增一個類：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: green;
       color: white;
       padding: 10px;
   }
   button{
     padding: 8px 12px;
     margin: 10px 0px;
   }
</style>
</head>
<body>
<p>Click the below to add a class ("highlight") to the "div" element.</p>    
<div id="myDiv">Tutorialspoint ("TP")</div>
<button onclick="addClasses()">Add Class</button>
<script>
   function addClasses() {
      let divElement = document.getElementById('myDiv');
      // Adding classes to the element by using add() method
      divElement.classList.add('highlight');
   }
</script>
</body>
</html>

上述程式向“div”元素添加了“highlight”類。

示例 2：從段落（“p”）中刪除指定的類

以下是 HTML DOM 的classList 屬性的另一個示例。我們使用此屬性及其“remove()”方法從段落（<p>）中刪除指定的類：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: green;
       color: white;
       padding: 10px;
   }
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to remove highlight from the paragraph.</p>
<p id="paragraph" class="highlight">This paragraph has a highlighted background.</p>
<button onclick="removeClass()">Remove Highlight Class</button>
<script>
   function removeClass() {
      var paragraph = document.getElementById("paragraph");
      paragraph.classList.remove("highlight");
   }
</script>
</body>
</html>

上述程式從段落中刪除了指定的類。

示例 3：在突出顯示段落之間切換

以下示例演示了classList 屬性的“toggle()”方法的用法。此方法允許我們切換段落 (<p>) 內文字的背景顏色：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: yellow;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the button to add or remove the highlight...</p>
<p id="paragraph">Click to toggle highlight:</p>
<button onclick="document.getElementById('paragraph').classList.toggle('highlight')">Toggle Highlight
</button>
</body>
</html>

上面的程式透過點選按鈕向段落新增和刪除“highlight”類。

示例 4：檢查元素上的類

以下示例使用 classList 屬性的“contains()”方法來檢查元素是否應用了“highlight”類：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: yellow;
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to check whether the paragraph contains the "highlight" class.</p>
<p id="pg" class="highlight">This paragraph has a highlighted background.</p>
<button onclick="checkHighlight()">Check Highlight Class</button>
<script>
   function checkHighlight() {
      var paragraph = document.getElementById("pg");
      if (paragraph.classList.contains("highlight")) {
         alert("Yes, paragraph contains 'highlight' class");
      } else {
         alert("No, paragraph contains 'highlight' class");
      }
   }
</script>
</body>
</html>

示例 5：訪問特定類

此示例顯示了classList 屬性的“item()”方法的用法，該方法允許我們訪問應用於元素的各個類名：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: green;
       padding: 10px;
       color: white;
   }
   .italic {
       font-style: italic;
   } 
</style>
</head>
<body>
<h2>Accessing Specific Classes</h2>
<p id="paragraph" class="highlight italic">This paragraph has multiple classes.</p>
<button onclick="getClassNames()">Get Classes</button>
<p id="classOutput"></p>
<script>
   function getClassNames() {
      var paragraph = 
      document.getElementById("paragraph");
      var classList = paragraph.classList;
      
      // Accessing specific classes by index
      var firstClass = classList.item(0);  
      var secondClass = classList.item(1);  
      var thirdClass = classList.item(2);  
      
      // Displaying the classes
      document.getElementById("classOutput").textContent="First class: " 
      + firstClass + ", Second class: " 
      + secondClass;
   }
</script>
</body>
</html>

示例 6：動態替換類

此示例顯示瞭如何使用classList 屬性的“replace()”方法動態地從元素中替換類：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM classList</title>
<style>
   .highlight {
       background-color: yellow;
       padding: 10px;
   }
   .italic {
       background-color: green;
       padding: 10px;
       color: white;
   }
   button{
       padding: 8px 10px;
   }
</style>
</head>
<body>
<p id="paragraph" class="highlight">This paragraph has a highlighted background.</p>
<button onclick="replaceClass()">Replace Highlight with Italic</button>
<script>
   function replaceClass() {
      var paragraph = document.getElementById("paragraph");
      paragraph.classList.replace("highlight","italic");
   }
</script>
</body>
</html>

示例 7：遍歷類

此示例演示瞭如何使用classList 屬性的“forEach()”方法遍歷動態應用於元素的每個類：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM classList</title>
<style>
   .red {
       color: red;
       padding: 10px;
   }
   .bold {
       font-weight: bold;
   }
   .underline {
       text-decoration: underline;
   }
</style>
</head>
<body>
<p>It will iterate over the class values..</p> 
<div id="ex" class="red bold underline">Dynamic Classes</div>
<button onclick="applyForEach()">Apply forEach</button>
<div id="output"></div>
<script>
   function applyForEach() {
      const element = document.getElementById('ex');
      let res="<p><strong>ClassList Classes:</strong></p>";
      element.classList.forEach(className => {
      res += `<p>${className}</p>`;
      });
      document.getElementById('output').innerHTML=res;
   }
</script>
</body>
</html>

示例 8：檢索類數

此示例顯示瞭如何使用 HTML DOM 的classList.length 屬性檢索應用於元素（即<div>）的類數：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM classList</title>
<style>
   .red {
       color: red;
       padding: 10px;
   }
   .b {
       font-weight: bold;
   }
   .udl {
       text-decoration: underline;
   }
   button{
       padding: 8px 12px;
   }
</style>
</head>
<body>
<p>Click the below button to displays number of classes applied...</p>
<div id="ex" class="red b udl">Dynamic Classes</div>
<button onclick="displayClassListLength()">Display ClassList Length</button>
<div id="output"></div>
<script>
   function displayClassListLength() {
      const element = document.getElementById('ex');
      const classLength = element.classList.length;
      const res = `<p>Number of Classes: ${classLength}</p>`;
      document.getElementById('output').innerHTML = res;
   }
</script>
</body>
</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
classList 是 是 是 是 是
html_dom_element_reference.htm
列印頁面
上一頁
下一頁
廣告