JS原生添加删除class的方法

最新推荐文章于 2023-12-29 16:58:34 发布

xiaozhen0610

最新推荐文章于 2023-12-29 16:58:34 发布

阅读量659

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h20kba2hhcbb.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

本文介绍了如何在JavaScript中自定义实现addClass、removeClass和toggleClass方法，这些方法通常用于操作DOM元素的类名，实现了类似jQuery的功能。通过正则表达式判断类名的存在，并进行相应的添加或删除操作。

摘要由CSDN通过智能技术生成

之前习惯了使用jquery的addClass的方法，然后就去找了下别人写的代码。

[javascript] view plain copy
function hasClass(obj,cls) {  
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
};  
  
function addClass(obj,cls) {  
    if (!hasClass(obj,cls)) obj.className += " " + cls;  
}  
  
Object.prototype.removeClass = function removeClass(obj,cls) {  
    if (hasClass(obj,cls)) {  
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
        obj.className = obj.className.replace(reg, ' ');  
    }  
};  
  
function toggleClass(obj,cls){  
    if(this.hasClass(obj,cls)){  
        this.removeClass(obj,cls);  
    }else{  
        this.addClass(obj,cls);  
    }  
};