js-DOM-css的className相关

Posted 2020-08-30 Heroine.z

 1、在非标准的浏览器，IE8及以下的浏览器不支持className的操作，包括getElementByClassName,addClassName,removeClassName;

 2、getElementByClassName处理兼容的方法：

　　

var aLi=getElementByClassName(document,‘box‘);//如果多一个限制元素范围的形式为：getElementByClassName(document,‘box‘,‘li‘);

function getElementByClassName(parent,className){//parent指在该范围下来选取节点，className指要获取的className名字
      var aEls=parent.getElementByTagName(‘*‘);//获取页面所有元素，也可以通过传参的方式将“*”替换为想要的元素范围。比如想要获取className为box的所有li元素，就需要将“*”改为li，将传参部分多增加一个tagName,传给tagName的参数为li。
//getElementByClassName(parent,className,tagName); 
//var aEls=parent.getElementByTagName(tagName);

      var arr=[];
      for(var i=0;i<aEls.length;i++){
         var aClassName=aEls[i].className.split(‘ ‘);
         for(var j=0;j<aClassName.length;j++){

               if(aClassName[j]==className){
                   arr.push(aEls[i]);
                   break;
               }
        }
      }
}  

3、添加className的方法：addClass()

 function addClass(obj,className){
     if(obj.className==‘‘){
      //如果原来没有className
         obj.className=className;
     }else{
      // 如果有className
     //如果要添加的className在原来的className中不存在
           var arrClassName=obj.className.split(‘ ‘);
           var index=arrIndexOf(arrClassName,className);
            if(index==-1){
               obj.className+=‘ ‘+className;
            }
     }
     //如果要添加的className在原来的className中存在,则不用再添加了

}
 function arrIndexOf(arrClassName ,className){
        for(var i=0;i<arrClassName.length;i++){
            if(a[i]==className){
               return i;
            }
        }
       return -1;
}                    

4、删除className的方法:removeClass

function removeClass(obj,className){
     //如果原来有class
      if( obj.className!=‘‘){
        var arrClassName=obj.className.split(‘ ‘);
        var index=arrIndexOf(arrClassName.className);
         //如果有要移除的class
        if(index!=-1){
           arrClassName.splice(index,1);
           obj.className=arrClassName.join(‘ ‘);
         }
        //如果没有要移除的class则不用进行操作
      }
}        
 function arrIndexOf(arrClassName ,className){
        for(var i=0;i<arrClassName.length;i++){
            if(a[i]==className){
               return i;
            }
        }
       return -1;
}