当前位置主页 > 资料库 > 前端教程 > HTML5 classList操作类名属性简介

HTML5 classList操作类名属性简介

2017-08-23
麦子学院

通常我们在操作类名时,需要通过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。

Previous:
上一篇:HTML5 meta viewport参数简介
Next:
下一篇:Element Traversal规范中的元素遍历方法

我要评论

返回顶部