1.classlist属性

  1. 要操作类名,可以通过 className 属性实现添加、删除和替换。但 className 是一个字符串, 所以每次操作之后都需要重新设置这个值才能生效,即使只改动了部分字符串也一样。<br />以下面的 HTML 代码为例:
  1. <div class="bd user disabled">...</div>

这个

元素有 3 个类名。要想删除其中一个,就得先把 className 拆开,删除不想要的那个, 再把包含剩余类的字符串设置回去。
比如:

  1. // 要删除"user"类
  2. let targetClass = "user";
  3. // 把类名拆成数组
  4. let classNames = div.className.split(/\s+/);
  5. // 找到要删除类名的索引
  6. let idx = classNames.indexOf(targetClass);
  7. // 如果有则删除
  8. if (idx > -1) {
  9. classNames.splice(i,1);
  10. }
  11. // 重新设置类名
  12. div.className = classNames.join(" ");
  • 这就是从
    元素的类名中删除”user”类要写的代码。
  • 替换类名和检测类名也要涉及同样的算 法。
  • 添加类名只涉及字符串拼接,但必须先检查一下以确保不会重复添加相同的类名。
  • 很多 JavaScript 库为这些操作实现了便利方法。

HTML5 通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。

  • classList 是一个新的集合类型 DOMTokenList 的实例。
  • 与其他 DOM 集合类型一样,DOMTokenList 也有 length 属性表示自己包含多少项,也可以通过 item()或中括号取得个别的元素。
  • 此外, DOMTokenList 还增加了以下方法。
    1. - add(value) 向类名列表中添加指定的字符串值value。如果这个值已经存在则什么也不做
    2. - contains(value) 返回布尔值,表示给定的value是否存在
    3. - remove(value) 从类名列表中删除指定的字符串值value
    4. - toggle(value) 如果类名列表中已存在指定的value,则删除;如果不存在,则添加

如此上面的代码就能简化为一行代码:

  1. div.classList.remove("user");

这行代码可以在不影响其他类名的情况下完成删除。其他方法同样极大地简化了操作类名的复杂 性,
如下面的例子所示:

  1. // 删除"disabled"类
  2. div.classList.remove("disabled");
  3. // 添加"current"类
  4. div.classList.add("current");
  5. // 切换"user"类
  6. div.classList.toggle("user");
  7. // 检测类名
  8. if (div.classList.contains("bd") && !div.classList.contains("disabled")){
  9. // 执行操作
  10. )
  11. // 迭代类名
  12. for (let class of div.classList){
  13. doStuff(class);
  14. }
  • 添加了 classList 属性之后,除非是完全删除或完全重写元素的 class 属性,否则 className 属性就用不到了。
  • IE10 及以上版本(部分)和其他主流浏览器(完全)实现了 classList 属性。