原生js封装addClass removeClass hasClass

最新推荐文章于 2024-08-13 21:02:23 发布

原创最新推荐文章于 2024-08-13 21:02:23 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

前端学习

5 篇文章

订阅专栏

本文介绍如何使用JavaScript来实现DOM元素上的CSS类的添加、删除及检查功能。通过三个核心函数：`addClass`、`removeClass` 和 `hasClass`，可以轻松地管理HTML元素的样式状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//添加类
function addClass(obj, cls) {
var obj_class = obj.className;
blank = (obj_class != "") ? " " : "";
added = obj_class + blank + cls;
obj.className = added;
}
//移除class
function removeClass(obj, cls) {
var obj_class = " " + obj.className + " ";
//将多余的空格替换为一个空格
obj_class = obj_class.replace(/(\s+)/gi, " ");

//将原来的class替换为首尾加空格的class
removed = obj_class.replace(" " + cls + " ", " ");

//去掉首尾空格
removed = removed.replace(/(^\s+)|(\s+$)/g, "");
obj.className = removed;
}
//判断是否有class
function hasClass(obj, cls) {
var obj_class = obj.className;
var obj_class_list = obj_class.split(" ");
var x = 0;
for(x in obj_class_list) {
if(obj_class_list[x] == cls) {
return false;
} else{
return true
}
}
}
//var div1 = document.getElementById("div1");
addClass(div1, "btn1");
removeClass(div1,"btn1");
if(hasClass(div1,"btn4")){
console.log("没有");
}else{
console.log("有");
}