Element: classList 屬性

Baseline 已廣泛支援

此功能已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 10 月以來，它已在各大瀏覽器中可用。

Element.classList 是一個只讀屬性，它返回一個活動的 DOMTokenList 集合，包含該元素的 class 屬性。然後，可以使用這個集合來操作類列表。

使用 classList 是訪問元素類列表的便捷替代方法，相比於透過 element.className 以空格分隔的字串形式訪問。

值

一個表示元素 class 屬性內容的 DOMTokenList。如果 class 屬性未設定或為空，它將返回一個空的 DOMTokenList，即 length 屬性等於 0 的 DOMTokenList。

儘管 classList 屬性本身是隻讀的，但您可以使用 add()、remove()、replace() 和 toggle() 方法來修改其關聯的 DOMTokenList。

您可以使用 classList.contains() 方法來測試元素是否包含指定的類。

示例

const div = document.createElement("div");
div.className = "foo";

// our starting state: <div class="foo"></div>
console.log(div.outerHTML);

// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("another-class");

// <div class="another-class"></div>
console.log(div.outerHTML);

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

// false
console.log(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

規範

規範
DOM # ref-for-dom-element-classlist①

瀏覽器相容性

另見

element.className
DOMTokenList
classList.js（一個完全實現 element.classList 的跨瀏覽器 JavaScript 墊片）

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 2025年4月3日，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤