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

2021年4月12日 4点热度 0条评论 来源: huruiDD

方法一 、

//  以下面的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 属性。

 

    原文作者:huruiDD
    原文地址: https://blog.csdn.net/weixin_38551805/article/details/115622302
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。