MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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 )
检查元素的类属性中是否存在指定的类值。

示例

// div是具有class =“foo bar”的<div>元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被设置则删除它,否则添加它
div.classList.toggle("visible");

// 添加/删除 visible,取决于测试条件,i小于10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

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

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

跨浏览器 JavaScript shim

注意:该 shim实现 在 IE 8 以下不起作用。

https://gist.github.com/xgqfrms-GitHub/8f1071b522a6f54316215d6aa37f5706

规范

Specification Status Comment
HTML Living Standard
Element.classList
Living Standard Note within the HTML specification related to the class attribute.
DOM
Element.classList
Living Standard Initial definition
DOM4
Element.classList
Obsolete  

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8.0 (Yes) 3.6 (1.9.2) 10[1] 11.50 5.1
toggle method's second argument 24 (Yes) 24 (24) 未实现[2] 15 5.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.9.2) 10 11.10 5.0
toggle method's second argument ? 24.0 (24) ? ? ?

[1] Not supported for SVG elements.  See a report at Microsoft about that.
[2] Internet Explorer never implemented this. See a report at Microsoft about that.

 

相关链接

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, NarK, teoli, AlexChao, ziyunfei, Wladimir_Palant
 最后编辑者: xgqfrms-GitHub,