1.classlist属性
要操作类名,可以通过 className 属性实现添加、删除和替换。但 className 是一个字符串, 所以每次操作之后都需要重新设置这个值才能生效,即使只改动了部分字符串也一样。<br />以下面的 HTML 代码为例:
<div class="bd user disabled">...</div>
这个
元素有 3 个类名。要想删除其中一个,就得先把 className 拆开,删除不想要的那个, 再把包含剩余类的字符串设置回去。
比如:
比如:
// 要删除"user"类
let targetClass = "user";
// 把类名拆成数组
let classNames = div.className.split(/\s+/);
// 找到要删除类名的索引
let idx = classNames.indexOf(targetClass);
// 如果有则删除
if (idx > -1) {
classNames.splice(i,1);
}
// 重新设置类名
div.className = classNames.join(" ");
- 这就是从元素的类名中删除”user”类要写的代码。
- 替换类名和检测类名也要涉及同样的算 法。
- 添加类名只涉及字符串拼接,但必须先检查一下以确保不会重复添加相同的类名。
- 很多 JavaScript 库为这些操作实现了便利方法。
HTML5 通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。
- classList 是一个新的集合类型 DOMTokenList 的实例。
- 与其他 DOM 集合类型一样,DOMTokenList 也有 length 属性表示自己包含多少项,也可以通过 item()或中括号取得个别的元素。
- 此外, DOMTokenList 还增加了以下方法。
- add(value) 向类名列表中添加指定的字符串值value。如果这个值已经存在则什么也不做
- contains(value) 返回布尔值,表示给定的value是否存在
- remove(value) 从类名列表中删除指定的字符串值value
- toggle(value) 如果类名列表中已存在指定的value,则删除;如果不存在,则添加
如此上面的代码就能简化为一行代码:
div.classList.remove("user");
这行代码可以在不影响其他类名的情况下完成删除。其他方法同样极大地简化了操作类名的复杂 性,
如下面的例子所示:
// 删除"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 (let class of div.classList){
doStuff(class);
}
- 添加了 classList 属性之后,除非是完全删除或完全重写元素的 class 属性,否则 className 属性就用不到了。
- IE10 及以上版本(部分)和其他主流浏览器(完全)实现了 classList 属性。