好用html5-api：classList

来源：互联网发布：cf穿墙软件编辑：程序博客网时间：2024/05/17 07:14

首先，对于兼容性，当然ie10开始才支持，而移动端支持的比较好，所以就只能忽略不计了

classList主要是用来操作class的，相比使用jq的remove方法，这显然是更为轻松的

他主要提供了四个方法：

方法描述add(class1, class2, ...)在元素中添加一个或多个类名。

如果指定的类名已存在，则不会添加contains(class)返回布尔值，判断指定的类名是否存在。

可能值：

true - 元素包已经包含了该类名
false - 元素中不存在该类名

item(index)返回类名在元素中的索引值。索引值从 0 开始。

如果索引值在区间范围外则返回 nullremove(class1, class2, ...)移除元素中一个或多个类名。

注意： 移除不存在的类名，不会报错。toggle(class, true|false)在元素中切换类名。

第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。

第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：

移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class: element.classList.toggle("classToAdd", true);

注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

--------------------------------------------------------------------------以上表格选自菜鸟教程----------------------------------------------------------------------------------

测试代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.abcd {width: 200px;height: 400px;background: #0000FF;border: 1px solid #ff0000;}.e{color: #fff;}</style></head><body><div style="float: left;">浙江温州江南皮革厂</div><div class="a" style="float: right;"><button class="a1">add增加</button><button class="a2">remove移除</button><button class="a3">toggle切换</button><button class="a4">Contains包含</button></div><script>document.querySelector(".a").addEventListener("click", function(cevent) {var btnclass = cevent.target.className;var myelment = document.querySelector("div");switch(btnclass) {case "a1":myelment.classList.add("abcd","e");break;case "a2":myelment.classList.remove("abcd","e");break;case "a3":myelment.classList.toggle("abcd");break;case "a4":alert("是否有包含名字为‘abcd，e’的class:" + myelment.classList.contains("abcd","e"))break;}console.log(myelment.classList);console.log(myelment.classList.length);});</script></body></html>

阅读全文

0 0