编辑这个页面须要登录或更高权限！

HTML DOM classList 属性

HTML DOM Element 对象

classList只读属性返回元素的类属性的实时DOMTokenList集合。

classList属性对于在元素上添加，删除和切换CSS类很有用。

该属性是只读的，尽管您可以使用add()和remove()方法对其进行修改。

使用classList是一种方便的代替方法，它可以通过className以空格分隔的字符串访问元素的类列表。

语法：

element.classList
var elem = document.getElementById("x");
elem.classList.add("para");
测试看看‹/›

浏览器兼容性

表中的数字指定了完全支持classList属性的第一个浏览器版本：

属性
classList83.6是5.110

性质

属性描述
length返回列表中的类数

方法

方法描述
add(class1, class2, ...)将一个或多个类名称添加到元素。
如果元素的class属性中已经存在指定的类，则不会添加该类。
contains(class)检查指定的类值是否存在于元素的class属性中。
可能的值：

  • true-元素包含指定的类名称

  • false-元素不包含指定的类名

item(index)通过集合中的索引返回类值。索引从0开始。
如果索引超出范围，则返回null。
remove(class1, class2, ...)从元素中删除一个或多个类名称。
注意：删除不存在的类不会引发错误。
replace(oldClass, newClass)用新的类替换现有的类。
toggle(class, true|false)在元素的类名称之间切换。
仅存在一个参数时：切换类的值；否则，返回0。即，如果该类存在，则将其删除并返回false，如果不存在，则将其添加并返回true。
当存在可选的第二个参数时：如果第二个参数的值为true，则添加指定的类值；如果第二个参数的值为false，则将其删除。
示例：
          删除一个类：element .classList.toggle（“ classToRemove”，false）;
  添加一个类：element .classList.toggle（“ classToAdd”，true）;

技术细节

返回值：DOMTokenList，包含元素的类名称的列表
DOM版本：DOM级别1

更多实例

将多个类添加到<p>元素：

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");
测试看看‹/›

从<p>元素中删除一个类：

var elem = document.getElementById("x");
elem.classList.remove("para");
测试看看‹/›

从<p>元素中删除多个类：

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");
测试看看‹/›

在两个类之间切换<p>元素：

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");
测试看看‹/›

返回<p>元素具有的类名称：

var len = document.getElementById("x").classList.length;
测试看看‹/›

返回<p>元素的类名称：

var name = document.getElementById("x").classList;
测试看看‹/›

返回<p>元素的第一个类名称（索引0）：

var name = document.getElementById("x").classList[0];
测试看看‹/›

使用item()方法返回<p>元素的第一个类名称（索引0）：

var name = document.getElementById("x").classList.item(0);
测试看看‹/›

找出元素是否具有“shadow”类：

var list = document.getElementById("x").classList;

if (list.contains("shadow")) {
alert("Yes!!! The P element contains 'shadow' class");
} else {
alert("No 'shadow' class found");   
}
测试看看‹/›

切换一个类（“open”）以创建侧面导航按钮：

相关参考

CSS教程：CSS选择器

CSS参考：CSS#id选择器

CSS Reference: CSS .class 选择器

HTML DOM参考：HTML DOM className属性

HTML DOM参考：HTML DOM getElementsByClassName()方法

HTML DOM参考：HTML DOM getElementById()方法

HTML DOM参考：HTML DOM querySelector()方法

HTML DOM Element 对象

JavaScript History 对象HTML DOM Element 对象