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

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(" ");
    }