JavaScript 对象
- JavaScript Array 对象
- JavaScript Boolean 对象
- JavaScript CSS 样式声明对象
- JavaScript Math 对象
- JavaScript Number 对象
- JavaScript String 对象
- JavaScript 正则表达式(RegExp) 对象
- JavaScript Console 对象
JavaScript 参考手册
JS DOM参考手册
HTML DOM classList 属性
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()方法