小姜哥的微信

DOM对象的classList对象属性介绍与用法

大家经常使用JQuery这样的JS框架提供的类似于addClass、removeClass等方法来操作DOM对象上的class。

DOM4级规定DOM对象需要实现一个名为classList的对象属性,该属性中提供了一些方法用于操作DOM class的方法,虽然现在尚处于草案阶段,但已经被浏览器广泛支持,从http://caniuse.mojijs.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'); // 删除样式。

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));
}

推荐文章

回到顶部