js-DOM-css的className相關

標籤：element   join   rri   css   add   remove   ret   ddc   split   

 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;}   

 

js-DOM-css的className相關