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.65.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 对象