元素：classList 属性

Element.classList 是一个只读属性，它返回一个实时的 DOMTokenList 集合，包含元素的 class 属性。然后可以使用它来操作类列表。

使用 classList 是访问元素类列表（作为以空格分隔的字符串）的一种便捷方法，类似于通过 element.className 进行访问。

值

一个 DOMTokenList，表示元素的 class 属性的内容。如果 class 属性未设置或为空，则返回一个空 DOMTokenList，即 length 属性等于 0 的 DOMTokenList。

虽然 classList 属性本身是只读的，但可以使用 add()、remove()、replace() 和 toggle() 方法来修改其关联的 DOMTokenList。

可以使用 classList.contains() 方法测试元素是否包含给定的类。

示例

js
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("anotherclass");

// <div class="anotherclass"></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①

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅