在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);
}
}