设置元素的样式值setCss

2017-08-14  本文已影响0人  gaoqizhuhui

在JS中给元素设置样式属性值,只能通过curEle.style.[attr]=value;这种方式给当前元素设置行内样式

setCss:给当前元素的某一个样式属性设置值(增加在行内样式上的)

function setCss(curEle,attr,value){

   //在JS中设置float样式值的话也需要处理兼容
   if(attr==="float"){
       curEle["style"]["cssFloat"]=value;
       curEle["style"]["styleFloat"]=value;
       return;
   }

   //如果打算设置的是元素透明度,需要设置两套样式来兼容所有浏览器
   if(attr==="opacity"){
       curEle["style"]["opacity"]=value;
       curEle["style"]["filter"]="alpha(opacity="+value*100+")";
       return;
   }  

   var reg=/^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
   if(reg.test(attr)){
       if(!isNan(value)){//--->判断传递进来的value值是否是一个有效数字,如果是有效数字,证明当前传递进来的值没有加单位,给补充单位
           value+=“px”;
       }
   }

   //对于某些样式属性,如果传递进来的值没有加单位,需要把单位默认的补充上     
   curEle["style"][attr]=value;
}

setGroupCss:批量设置元素样式值

 function setGroupCss(curEle,options){
 
    //通过检测options的数据类型,如果不是一个对象,则不能进行批量设置
     if(Object.prototype.toString.call(options)!=="[object Object]"){
         return;
     }

//遍历对象中的每一项,调取setCss方法一个个的进行设置即可
     for(var key in options){
        if(options.hasOwnProperty(key)){ //一般for-in遍历都是遍历私有属性
           this.setCss(curEle,key,options[key]);
        }
     }
}

css:jquery中提供了这样一个方法,即可以实现获取,也可以实现单独设置和批量设置

function css(curEle){
    var argTwo=arguments[1];
    if(typeof argTwo==="string"){ //第二个参数值是一个字符串,这样很有可能是获取样式;接下来还需判断是否存在第三个参数,若存在即为单独设置样式
        var argThree=arguments[2];
        if(typeof argThree==="undefined"){ //第三个参数不存在
             return this.getCss(curEle,argTwo);
        }
       //第三个参数存在即为单独设置
        this.setCss(curEle,argTwo,argThree);
    }
    argTwo= argTwo || 0;
    if(argTwo.toString()==="[object Object]"){
        this.setGroupCss(curEle,argTwo);
    }
}
上一篇 下一篇

猜你喜欢

热点阅读