HTML5 classList操作类名属性简介

08-23 次

标签 html5 javascript

通常我们在操作类名时，需要通过className属性来添加，删除和替换类名。因为className中是一个字符串，所以即使我们只是修改字符串的一部分，也要每一次都重新设置整个字符串的值。例如有下面的代码：

<div class="name1 name2 name3"></div>

这个<div>元素中共有三个类名。如果要删除第一个类名name1，需要把这三个类名拆开，删除不需要的类名，然后在将余下的类名组合后重新放回去。代码如下：

//第一步要获取类名字符串，并将它拆分为一个数组
var className = div.className.split(/\s+/);

//然后找到需要删除的类名
var pos = -1;
var i;
var len;
for(i = 0; len = className.length; i < len; i++) {
  if(className[i] == "name1"){
    pos = i;
    break;
  }
}

//接下来删除类名
className.splice(i, 1);

//最后把余下的类名重新凭借为字符串再放回去
div.className = className.join(" ");

在传统的javascript中，要完成类名的删除，上面的代码步骤是必须的。在HTML5中新增了一个操作类名的方式，可以让操作更加简单安全，这个方式就是为所有的元素添加classList属性。

这个classList属性是新集合类型DOMTokenList的实例。与其它DOM集合类似，DOMTokenList有一个表示自己包含多少个元素的length属性。要取得每一个元素可以使用item()方法，也可以使用方括号语法。另外，这个新类型还定义了下面的一些特殊方法：

add(value)：将指定的字符串值添加到列表中。如果值已经存在则不会添加。
contains(value)：指定列表中是否存在已给定的值。存在则返回true，否则返回false。
remove(value)：从列表中删除指定的字符串。
toggle(value)：如果列表中已经存在指定的值则删除它，否则将指定的值添加到列表中。

如果使用classList，前面例子使用一句代码就可以完成了。

div.classList.remove("name1");

其它的方法也能够大大的减少类似传统js操作的复杂性，例如：

// 删除 disable 类
div.classList.remove("disable");

// 添加 disable 类
div.classList.add("disable");

// 切换 disable 类
div.classList.toggle("disable");

// 确定元素中是否包含指定的类名
if(div.classList.contains("disable")) {
  //执行某些操作
}

有了classList属性，除非你需要全部删除所有的类名，或者完全重写元素class属性，否则你就不需要使用到className属性了。

支持classList属性的浏览器有IE10+，firefox3.6+和Chrome。