HTML/CSS
HTML5 类名操作ClassList属性简介
PetitQ
常我们在操作类名时，需要通过 className 属性来添加，删除和替换类名。因为 className 中是一个字符串，所以即使我们只是修改字符串的一部分，也要每一次都重新设置整个字符串的值。如果一个元素有多个类名，要如何删除呢，jqeury 提供了 removeClass()这个 api，如果不用插件，自己封装，例如有下面的代码：
<div class="name1 name2 name3"></div>
也想出现在这里？联系我们吧
这个
元素中共有三个类名。如果要删除第一个类名 name1，需要把这三个类名拆开，删除不需要的类名，然后在将余下的类名组合后重新放回去，代码如下：
function removeClass(elm,removeClassName) {
//首先渠道类名字符串并拆分成数组var classNames = elm.className.split(/\s+/);
var pos = -1, i, len;
//找到要删的类名for (i = 0, len = classNames.length; i < len; i++){
if(classNames[i] == "name1") {
pos = i;
break;
}}if(pos == -1){
throw Error("没有这个类名");
}//删除类名classNames.splice(i,1);
//把剩下的类名拼成字符串重新设置elm.className = classNames.join(" ");
}
在传统的 javascript 中，要完成类名的删除，上面的代码步骤是必须的。在 HTML5 中新增了一个操作类名的方式，可以让操作更加简单安全，这个方式就是为所有的元素添加 classList 属性。这个 classList 属性是新集合类型 DOMTokenList 的实例。与其它 DOM 集合类似，DOMTokenList 有一个表示自己包含多少个元素的 length 属性。要取得每一个元素可以使用 item()方法，也可以使用方括号语法。另外，这个新类型还定义了下面的一些特殊方法：
add(value)：将指定的字符串值添加到列表中。如果值已经存在则不会添加
contains(value)：指定列表中是否存在已给定的值。存在则返回 true，否则返回 false
remove(value)：从列表中删除指定的字符串
toggle(value)：如果列表中已经存在指定的值则删除它，否则将指定的值添加到列表中
当然 html5 新增了操作类名的方式 classList 他有 5 个属性，如果使用 classList，前面例子使用一句代码就可以完成了。
div.classList.remove("name1");
其它的方法也能够大大的减少类似传统 js 操作的复杂性，例如：
//删除"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]);
}
但是支持浏览器比较少（classList 兼容性有些差，不兼容 ie10 以下的 ie 浏览器）， ie10+,Firefox 3.6+和 Chrome。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
相关文章
热销模板
本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！
登录