新手指南：JavaScript classList 方法介紹

更新日期： 2024 年 9 月 14 日

在網頁開發中，操控元素的 CSS 類（class）是非常常見的任務。

JavaScript 提供了一個簡便的工具來操作元素的類名，那就是 classList。它可以幫助我們輕鬆地添加、移除和切換元素的類，從而改變元素的樣式或行為。

什麼是 classList？

classList 是一個 DOM API，它返回元素的類別集合。

透過這個集合，我們可以方便地對元素的類進行操作。

classList 提供了多個方法來處理類名，而不需要手動操作整個 className 屬性。

常見的 classList 方法

add()：

為元素添加一個或多個類名。

element.classList.add("new-class");

如果該類名已經存在，則不會重複添加。

remove()：

移除元素中的一個或多個類名。

element.classList.remove("old-class"); 

如果類名不存在，則不會報錯。

toggle()：

切換類名。如果該類名已存在，則移除；如果不存在，則添加。

element.classList.toggle("active");

contains()：

檢查元素是否具有特定類名。

if (element.classList.contains("highlight")) {
  // 做一些事情
}

replace()：

將元素的一個類名替換為另一個類名。

element.classList.replace("old-class", "new-class");

實例：改變按鈕樣式

以下是如何使用 classList 在按鈕點擊時切換其樣式：

HTML

<button id="myButton">點擊我</button>

JavaScript

const button = document.getElementById("myButton");

button.addEventListener("click", () => {
  button.classList.toggle("active");
});

CSS

button {
  background-color: lightgray;
}

button.active {
  background-color: green;
  color: white;
}

當你點擊按鈕時，它會切換背景顏色和文字顏色。

結語

classList 提供了一個簡單且強大的方法來操控 DOM 元素的類名，避免了手動處理字符串的麻煩。

無論是添加、移除還是切換類名，classList 都讓我們可以更靈活地控制網頁元素的樣式，從而創建更動態的用戶體驗。

希望這篇文章能幫助你更好地理解並應用 classList，讓你的 JavaScript 開發更加簡單有效！