你的位置:首页 > Java教程

[Java教程]原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass


<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title></head><body><div class="div1" id="box1"></div><input type="button" value="按钮" id="btn1"/><script>  function addClass(obj,cls) {//obj:要添加classname的元素,cls:要添加的classname;    //如果原来没有class:    if(obj.className == ''){      obj.className = cls;    } else {      //本来已经有class,新增class的情况:      var arrclassname = obj.className.split(' ');//      var index = arrIndexOf(arrclassname,cls);      if(index == -1) {        //如果要添加的class在原来的元素上不存在:        obj.className += ' ' + cls;      }    }  }  function arrIndexOf(arr,v){//检测数组中是否有相同的值存在,并且返回它的位置;    for(var i=0;i<arr.length;i++){      if(arr[i] == v){        return i;      }    }    return -1;  }  function removeClass(obj,cls){    //如果有class的话:    if(obj.className != ''){      var arrClassName = obj.className.split(' ');//对原有class进行拆分,看看是否包含需要移除的class,也就是传参cls的classname;      var index = arrIndexOf(arrClassName,cls);      //r如果有需要移除的class      if(index != -1){        arrClassName.splice(index,1);        obj.className = arrClassName.join('');      }    }  }  function hasClass(obj,cls){    var cls = cls || '';    if( cls.replace(/\s/g,'').length == 0){      return false;//当cls没有参数时,返回false;    }else{      return new RegExp(' ' + cls + '').test(' ' + obj.className);    }  }  function toggleClass(obj,cls){    hasClass(obj,cls) ? removeClass(obj,cls) : addClass(obj,cls);  }  function getByClass(oParent, sClass) {    if (oParent.getElementsByClassName) {      return oParent.getElementsByClassName(sClass);    } else { //IE 8 7 6      var arr = [];      var reg = new RegExp('\\b' + sClass + '\\b');      var aEle = oParent.getElementsByTagName('*');      for (var i = 0; i < aEle.length; i++) {        if (reg.test(aEle[i].className)) {          arr.push(aEle[i]);        }      }      return arr;    }  }  var oBtn1 = document.getElementById('btn1');  var oBox1 = document.getElementById('box1');  oBtn1.onclick = function () {    if( hasClass(oBox1,'div1') ){      alert('hasclass');    };    alert( getByClass(document,'div1').length );  }</script></body></html>