classList只读属性返回元素的类属性的实时DOMTokenList集合。
classList属性对于在元素上添加,删除和切换CSS类很有用。
该属性是只读的,尽管您可以使用add()和remove()方法对其进行修改。
使用classList是一种方便的代替方法,它可以通过className以空格分隔的字符串访问元素的类列表。
element.classList
var elem = document.getElementById("x"); elem.classList.add("para");测试看看‹/›
表中的数字指定了完全支持classList属性的第一个浏览器版本:
属性 | |||||
classList | 8 | 3.6 | 是 | 5.1 | 10 |
属性 | 描述 |
---|---|
length | 返回列表中的类数 |
方法 | 描述 |
---|---|
add(class1, class2, ...) | 将一个或多个类名称添加到元素。 如果元素的class属性中已经存在指定的类,则不会添加该类。 |
contains(class) | 检查指定的类值是否存在于元素的class属性中。 可能的值:
|
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()方法