新手指南：JavaScript classList 方法介紹

By徐培鈞
LinkedIn

更新日期： 2025 年 3 月 9 日

本文為 DOM 基本介紹系列文，第 12 篇：

  1. HTML DOM 破解：新手完全指南，帶你深入理解網頁結構
  2. 初學者指南：JavaScript 中的DOM 模型與HTML 的關係
  3. JavaScript 中的DOMContentLoaded：新手必讀指南
  4. JavaScript DOM 常見屬性介紹：給新手的指南
  5. 深入理解DOM 中的.parentNode 和.children 屬性
  6. 完全指南：如何使用JavaScript 的getElementById 方法
  7. JavaScript 中querySelector 的使用指南：初學者必讀
  8. JavaScript 新增與移除DOM 元素：新手指南
  9. JavaScript DOM insertAdjacentElement() 使用指南：給新手的入門文章
  10. insertAdjacentElement 與 insertAdjacentHTML 的常見錯誤解析
  11. 使用 JavaScript 的 dataset 屬性：為 HTML 元素動態添加自訂屬性
  12. 新手指南：JavaScript classList 方法介紹　👈進度

在網頁開發中，操控元素的 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 開發更加簡單有效！

Similar Posts