javascript 操作类名,className 属性实现添加、删除和替换

方法一 、

//  以下面的HTML代码为例：
<div class="bd user disabled">...</div>

// 要删除"user"类
let targetClass = "user"
// 把类名拆分为数组
let classNames = div.className.split(/\s+/)
// 找到要删除类名的索引
let idx = classNames.indexOf(targetClass)
// 如果有就删除
if (idx > -1) {
    classNames.splic(idx,1)
}

// 重新设置类名
div.className = classNames.join(" ")

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

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

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

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 属性。