Element.classList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Element.classList 是一个只读属性，返回一个元素 class 属性的动态 DOMTokenList 集合。这可以用于操作 class 集合。

相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。

值

一个 DOMTokenList，表示元素的 class 属性的集合。如果 class 属性没有设置或者为空，它将返回一个空的 DOMTokenList，即 length 属性等于 0 的 DOMTokenList。

尽管 classList 属性自身是只读的，但是你可以使用 add()、remove()、replace() 和 toggle() 方法修改其关联的 DOMTokenList。

示例

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

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

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

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

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

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

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");

备注： Firefox 26 之前的版本没有在 add/remove/toggle 实现使用多个参数。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=814014

规范

Specification
DOM Standard
# ref-for-dom-element-classlist①

浏览器兼容性

BCD tables only load in the browser

参考