zoukankan      html  css  js  c++  java
  • 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;
    }   
  • 相关阅读:
    EF中的EntityState几个状态的说明
    sql server 更新表,每天的数据分固定批次设置批次号sql
    bootstrap Validators
    马老师 生产环境mysql主从复制、架构优化方案
    PHP在微博优化中的“大显身手”
    将form表单转化为json数据
    免费资源库收集
    奇怪的php问题
    PHP 大数自动转换为科学计数法
    access database in a helper function ?
  • 原文地址:https://www.cnblogs.com/yuxingyoucan/p/6388715.html
Copyright © 2011-2022 走看看