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; }
时间: 2024-08-24 02:43:15