Element.classList 是一个只读属性,返回一个元素的类属性的实时DOMTokenList 集合。

使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。

语法

let elementClasses = elementNodeReference.classList;

elementClasses 是一个 DOMTokenList表示 elementNodeReference 的类属性 。如果类属性未设置或为空,那么 elementClasses.length 返回 0。虽然element.classList 本身是只读的,但是你可以使用 add() remove()方法修改它。

方法

add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
replace( oldClass, newClass )
用一个新类替换已有类。

示例

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 );

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");

Firefox 26 以下的版本并未实现 add/remove/toggle 方法中的所有参数。参见 https://bugzilla.mozilla.org/show_bug.cgi?id=814014

规范

Specification Status Comment
DOM
Element.classList
Living Standard Initial definition
DOM4
Element.classList
Obsolete  

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
classListChrome Full support 8Edge Full support 16
Full support 16
Partial support 12
Notes
Notes Not supported for SVG elements.
Firefox Full support 3.6IE Full support 10Opera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5Samsung Internet Android Full support Yes
toggle() method's second argumentChrome Full support 24Edge Full support 12Firefox Full support 24IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 24Opera Android ? Safari iOS Full support 7Samsung Internet Android ?
Multiple arguments for add() & remove()Chrome Full support 24Edge Full support 12Firefox Full support 26IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 26Opera Android ? Safari iOS Full support 7Samsung Internet Android ?
replace()Chrome Full support 61Edge Full support 17Firefox Full support 49IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android Full support 61Edge Mobile ? Firefox Android Full support 49Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

相关链接

文档标签和贡献者

最后编辑者: mdnwebdocs-bot,