原生javascript实现addClass和removeClass

曾经终败给现在 2022-07-16 13:50 207阅读 0赞

addClass()和removeClass()是jQuery提供的功能。  
用法：  
`$(selector).addClass(classname);`和`$(selector).removeClass(classname);`

在大多数情况下，使用jquery的选择器选择的元素是可以使用这两个方法来追加和删除class属性的，但是有一些特殊情况，不是通过$()选择器及jQuery其他方法（比如parent(）, children()\[0\]等）拿到的元素，是没法使用这两个方法的。  
比如下面这种情况：

var cArray = $("input[type='checkbox']");
    for (var i=0; i < cArray.length; i++) {
        var element = cArray[i].parentElement;
        element.addClass('uncheck_1');
        //element.className += 'uncheck_1';
    }

在这段代码里面，element是通过parentElement拿到的，所以在执行`element.addClass('uncheck_1');`的时候，会报错，提示`addClass is not a function()`错误。  
这个时候，就需要使用原生的javascript方法来添加class了。

下面是通过原生的javascript实现了三个方法，可以解决上述问题。

function hasClass(element,cName){         //检查class是否存在
        return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
    }
    function addClass(element,cName){         //添加一个class
        if(!hasClass(element,cName)){
            element.className +=' '+cName;
        }
    }
    function removeClass(element,cName){         //移除一个class
        if(hasClass(element,cName)){
            element.className = element.className.replace(new RegExp('(\\s|^)'+cName+'(\\s|$)'),' ');
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery addClass，removeClass，class属性增删

效果图，添加、移除class属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

我会带着你远行/ 2023年10月06日 09:12/ 0 赞/ 4 阅读

相关原生JS实现addclass

\\ > 只介绍关键部分代码，可自己尝试应用 \\ CSS .class1{ display: none; } HTML

Myth丶恋晨/ 2023年06月30日 10:43/ 0 赞/ 6 阅读

相关原生js实现addClass、removeClass、toggleClass

jquery里有添加样的().addClass和移除样式()>removeClass()；那么如何用原生js实现？ function hasClass(obj,

我不是女神ヾ/ 2022年07月28日 04:16/ 0 赞/ 144 阅读

相关原生javascript实现addClass和removeClass

addClass()和removeClass()是jQuery提供的功能。用法： `$(selector).addClass(classname);`和`$(sele

曾经终败给现在/ 2022年07月16日 13:50/ 0 赞/ 208 阅读

相关超有用！原生JS实现增加删除class（addClass,removeClass,toggleClass）

<table style="border-collapse:collapse; border-spacing:0px; border:1px solid silver; wid

Bertha 。/ 2022年06月12日 04:53/ 0 赞/ 200 阅读

相关 jquery addClass，removeClass 设置或删除类

通过 jQuery，可以很容易地对 CSS 元素进行操作。切换 CSS 类 -------------------- jQuery 操作 CSS jQuery 拥有

超、凢脫俗/ 2022年05月23日 12:44/ 0 赞/ 180 阅读

相关 addClass和removeClass的用法

一个需求中需要用到样式的改变，自然想到了addClass和removeClass，但是在用的犯了一个很低级的错误，导致纠结了半天。初始写法（错误写法）： i

分手后的思念是犯贱/ 2022年04月02日 04:58/ 0 赞/ 184 阅读

相关 .addClass(),.removeClass(),.toggleClass()的区别

其实toggleClass()方法就类似于这样的，如： $("selector").toggleClass("className");

不念不忘少年蓝@/ 2022年03月02日 02:05/ 0 赞/ 189 阅读

相关使用addClass和removeClass完成内容切换

使用addClass和removeClass完成内容切换作者：吱韩菌开发工具：Visual Studio 2015 撰写时间：2019-6-5 今天要给大家展示

叁歲伎倆/ 2022年01月21日 08:35/ 0 赞/ 262 阅读

相关 jQuery--样式操作（addClass()、removeClass()、toggleClass()、css()）详解

样式操作在HTML代码中，通过class属性指定HTML标签的样式名；在jQuery中，可以使用attr()方法操作元素的class属性，以获取或改变元素的样式。 1

深碍√TFBOYSˉ_/ 2021年08月13日 19:43/ 0 赞/ 348 阅读