html5新增操做类名方式 classList

若是一个元素有多个类名，要如何删除呢，jqeury提供了removeClass()这个api，若是不用插件，本身封装，能够这样

 1         function removeClass(elm,removeClassName) {  2             var classNames = elm.className.split(/\s+/);//首先渠道类名字符串并拆分红数组
 3             var pos = -1, i, len;  4             for (i = 0, len = classNames.length; i < len; i++){//找到要删的类名
 5                 if(classNames[i] == removeClassName) {  6                     pos = i;  7                     break;  8  }  9  } 10             if(pos == -1){ 11                 throw Error("没有这个类名"); 12  } 13             classNames.splice(i,1);//删除类名
14             elm.className = classNames.join(" ");//把剩下的类名拼成字符串从新设置
15         }

 

固然html5新增了操做类名的方式 classList 他有4个属性

add(value)：将给定的字符串值添加到列表中。若是值已经存在，就不添加了。 contains(value)：表示列表中是否存在给定的值，若是存在则返回 true，不然返回 false。 remove(value)：从列表中删除给定的字符串。 toggle(value)：若是列表中已经存在给定的值，删除它；若是列表中没有给定的值，添加它

下面是使用示例,很是方便

//删除"disabled"类
div.classList.remove("disabled"); //添加"current"类
div.classList.add("current"); //切换"user"类
div.classList.toggle("user"); //肯定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){ //执行操做
) //迭代类名
for (var i=0, len=div.classList.length; i < len; i++){ doSomething(div.classList[i]); }

 可是支持浏览器比较少， ie10+,Firefox 3.6+和 Chrome。