• js-DOM-css的className相关


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

    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;
    }   
  • 相关阅读:
    第十六节 URL映射的时候指定默认参数
    第十五节 自定义path转换器
    第十四节 reverse函数补充
    第十一节 实例命名空间
    第十节 url命名和应用命名空间
    第八节 url解释器
    MySQL条件查询
    MySQL判断数据是否为空
    MySQL拼接字符串
    MySQL加号+ 的作用
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/6388715.html
Copyright © 2020-2023  润新知