HTML5 classList操作类名属性简介

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

 

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!

易微帮 » HTML5 classList操作类名属性简介

提供最优质的资源集合

立即查看 了解详情