View in EnglishAlways switch to English

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 ⁨2017年10月⁩.

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

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

值

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

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

示例

const div = document.createElement("div");div.className = "foo";// 初始状态：<div></div>console.log(div.outerHTML);// 使用 classList API 移除、添加类值div.classList.remove("foo");div.classList.add("anotherclass");// <div></div>console.log(div.outerHTML);// 如果 visible 类值已存在，则移除它，否则添加它div.classList.toggle("visible");// add/remove visible, depending on test conditional, i less than 10div.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