前端学习之原生JS实现addClass及removeClass方法的封装

最新推荐文章于 2024-11-14 06:20:07 发布

原创最新推荐文章于 2024-11-14 06:20:07 发布

· 624 阅读

0 ·

版权

文章标签：

#前端之JS学习

原生JS实现jQuery方法专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在JavaScript中封装addClass和removeClass方法的实现方式，通过简单的函数封装，可以更方便地为DOM元素添加或移除类名，适用于前端开发场景。

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

addclass方法封装
HTML代码：

<div id="b1" class="two"></div>
<div id="b2" class="two three"></div>

JS代码：

var o1=document.querySelector('#b1');
var o2=document.querySelector('#b2');
    // addClass(o1,"two");
    // addClass(o2,"two");
    function addClass(obj,newCls){ 
      var preCls=obj.getAttribute('class');         
      if(preCls!=null){       
        if(preCls.indexOf(newCls)!=-1){
          return;
        }         
        newCls=preCls+" "+newCls;
      }      
      obj.className=newCls;    
    }

removeclass方法封装
HTML代码：

<div id="b1" class="two"></div>
<div id="b2" class="two three"></div>

JS代码：

//删除class
    function removeClass(obj,cls){
      var preCls=obj.getAttribute('class');
      //若对象没有class属性或者不包含要祛除的class，不执行
      if(preCls==null||preCls.indexOf(cls)==-1){
        return;
      }
      //one two three
      var clsArr=preCls.split(" ");
      console.log(clsArr);
      var index=clsArr.indexOf(cls);//判断要删除的class在数组中的位置
      console.log(index);
      clsArr.splice(index,1);//删除class      
      obj.className=clsArr.join(" ");
    }