请使用firefox,chrome等最新浏览器浏览本站。

html5 classList API

html5 阿豹 435次浏览 0个评论 扫描二维码

classList API是与操作dom元素类名相关的api.
查看兼容性
之前我们用js操作dom元素的类名,采用的是dom.className方法,这样做有一个弊端就是不能单独对className就行增减操作。需要采用replace()方法。从而增加了一些不必要的操作。
classList API列表:

方法或属性 说明
add(“class”) 往类名列表中新增一个类名,如果之前类名存在,则添加忽略。
remove(“class”) 往类名列表中移除该类名
toggle(“class”) 如果类名列表中有类名则删除并返回false,没有则添加并返回true
item(num) 返回对应索引的类名
contains(“class”) 类名列表中是否包含该类名,如果包含,则返回true, 不包含,则false
toString() 获得类名列表字符串,类似className
length 元素类名的个数

classList的扩展

add()方法一次只能添加一个class,如果我们想添加多个,就要调用多出add().怎么办呢?
我们可以对classList做扩展。从classList的返回值我们可以看出,classList本质上是DOMTokenList(DOM标记列表).
下面我们为classList添加一个方法使其可以一次添加多个类名。

DOMTokenList.prototype.adds = function(clssArray) {
   clssArray.split(" ").forEach(function(value) {
       this.add(value);
   }, this);
   return this;
};
var classLi = document.getElementById("box").classList;
classLi.adds("b c");
alert(classLi.toString());
//b c

转载请注明html5 classList API
喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到