发新话题
打印

javascript中使用classList操作DOM class的增加修改删除

javascript中使用classList操作DOM class的增加修改删除

classList实际上已经出现好多年了,因此,自然,FireFox浏览器,Chrome浏览器都支持的很。IE家族中,从IE10浏览器开始才开始认可classList能进能退的非一刀切做法。

手机上,Android 3.0+以上才开始支持,哦,该死,这很糟糕。现在手机web app要求android 2.*也要支持。实时兼容性查看点击这里

由此可见,在PC上,如果要判断是否是IE10+以及其他现代浏览器,可以试试:document.body.classList是否为undefined.

length 属性
表示元素类名的个数,只读

item()
支持一个参数,为类名的索引,返回对应的类名,例如上例:
代码:
document.body.classList.item(0);
结果是:"a".

如果索引超出范围,例如:
代码:
document.body.classList.item(3);
结果是:null.

add()
支持一个类名字符串参数。表示往类名列表中新增一个类名;如果之前类名存在,则添加忽略。例如:
代码:
document.body.classList.add("c");
document.body.classList.length  // 3
此函数方法执行的返回值是undefined, 因此,classList的add()方法是无法级联的。下面的remove()方法也是如此。

remove()
支持一个类名字符串参数。表示往类名列表中移除该类名。例如:
代码:
document.body.classList.remove("c");
document.body.classList.length  // 2
有点对应于jQuery中的removeClass()方法,然后者返回包装器对象本身,可级联;这里的remove()方法返回undefined.

toggle()
支持一个类名字符串参数。无则加勉,有则移除之意。若类名列表中有此类名,移除之,并返回false; 如果没有,则添加该类名,并返回true.

部分现代浏览器,例如Chrome浏览器以及Firefox 24的toggle()方法已经支持第2个参数,.toggle(token, switch). 其中参数switch为Boolean类型值,如果为true表示添加,如果为false则表示移除。并返回该Boolean值。

contains()
支持一个类名字符串参数。表示往类名列表中是否包含该类名。有点对应jQuery中的hasClass方法,注意,这里的是contains而不是contain,后面有个s哦!

返回值很易懂的。如果包含,则返回true, 不包含,则false. 例如:
代码:
document.body.classList.contains("c");  // false 因为"c"上面remove掉了
本内容部分或全部来源于这里,著作权归原作者所有,如有问题请联系我们处理。

TOP

发新话题