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 上查看此页面 • 报告此内容的错误