email:gm4linus at gmail dot com
大家经常使用JQuery这样的JS框架提供的类似于addClass、removeClass等方法来操作DOM对象上的class。
DOM4级规定DOM对象需要实现一个名为classList的对象属性,该属性中提供了一些方法用于操作DOM class的方法,虽然现在尚处于草案阶段,但已经被浏览器广泛支持,从http://caniuse.sinaapp.com/html/item/classlist/index.html网站可以看出浏览器兼容性还是不错的。
所有方法介绍如下:
add : 为DOM对象加class。
remove :从DOM对象删class?。
contains :检测DOM对象是否已经应用了某class。
toggle :若DOM对象已经应用了某class则删除,若未应用则添加。
item :获取指定下表的class名字。
属性介绍:
length :DOM上应用class的个数
代码示例:
var clsList = document.getElementById(“cuebar”).classList;clsList.add(“some-css-class”); // 添加样式。clsList.remove(“some-css-class”); // 香港vps 删除样式。if(clsList.contains(“some-css-class”)){ // 是否已经使用了某样式。 // do something}clsList.toggle(“some-css-class”); // 如果some-css-class已经存在那么删除,如果不存在那么添加。for(var i = 0; i < clsList.length; i++){console.log(clsList.item(i));}
65789099