码迷,mamicode.com
首页 > Web开发 > 详细

js-DOM-css的className相关

时间:2017-02-11 11:21:43      阅读:191      评论:0      收藏:0      [点我收藏+]

标签: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相关

标签:element   join   rri   css   add   remove   ret   ddc   split   

原文地址:http://www.cnblogs.com/yuxingyoucan/p/6388715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!