原生JS添加Class/删除Class/判断Class

导读:
  其实文中的代码通俗易懂,很容易看明白,不过还是解说一下,让像我一样的新手容易上手。
  文中代码支持IE9以上,因IE5~8不支持indexOf属性,所以自己在JS原型链中写了一个indexOf的属性方法让代码支持IE5以上,具体可以查看下面的方法。

 
//新增类名
解说:
  如果有相同的类名再次新增的话,还是会增,所以首先用hasClass判断是否有,没有就加,有就不加。
  space,这里是判断新增的类名前面需不需要加空格,如果新增的类名前面有类名不加空格我想大家都明白会导致什么样的一个结果,所以这里首先进行判断。

function addClass(ele,clm){
   if(!hasClass(ele,clm)){
          var space = ele.className == '' ? '' : ' ';
          ele.className = ele.className + space + clm;
   }
}

 
 
//删除类名
解说:
  先进入一个判断,如果有这个类名就删除,没有就什么都不执行。
a:删除前先获取obj的类名

b:obj.split(’ ‘); 这一功能是把获取到的类名(string)转换成一个数组

c:obj.indexOf(‘参数’); 参数的意思就是在数组中找到你要删除的那个值,找得到就是n,找不到就是-1。

  obj.splice(‘索引’,’长度’,’参数’); 这里的索引就是通过indexOf获得的位置,长度不用改直接是1,参数可写可不写,这里的参数就是你要替换成什么,但这里只有删除,没有替换,但让可以替换,根据自身需求进行简单修改就搞定。

  obj.join(’ ‘); className转换为数组后需要重新转为字符串,需要主要的有两个地方,split以及join中间必须是一个空格,否则就有问题了,具体W3C有解释。


function removeClass(ele,clm){
   if(!hasClass(ele.clm)){
       var a = ele.className,  // aa bb cc a b c
           b = a.split(' '),   // aa bb cc a b c
           c = b.indexOf(clm);
       b.splice(c,1);
       b = b.join(' ');
       ele.className = b;
   }
}

 
 
//判断是否有类名
解说:
  这里我是想把a/b/c通过removeClass来解决,但是不知道该怎么去缩减了,想了很久也没有一个可以实施的方案,无奈之下只能如此了,不知道大家怎么想,毕竟一样的代码能省就省,如果您有更好的方法,可以在下方评论。
  看了一些其他人写的,但用的方法基本上是正则表达式,对于正则只知道怎么个true与false,但是要用正则表达式来删除自己不想要的,我是完全没头绪,所以只能用这么个办法。暂时这样吧,等待有大神能教我一下怎么个使用吧。

function hasClass(ele,clm){
    var a = ele.className,  // aa bb cc a b c
        b = a.split(' '),   // aa bb cc a b c
        c = b.indexOf(clm);
    if(c !== -1){
       return true;
    }else{
       return false;
    }
    }

 
 
需要注意的是:考虑到IE5/6/7/8不支持indexOf属性,所以写了一串代码让以上IE支持indexOf,并添加到JS原型链中。

if(!Array.prototype.indexOf){
    Array.prototype.indexOf = function(value){
        var a = 0,
            b = this.length;
        for(; aif(this[a] === value){
                return a;
            }else{
                return -1;
            };
        };
    };
};

你可能感兴趣的:(前端JavaScript)