如果一个元素有多个类名,要如何删除呢,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。