操作css属性的通用方法,设置css属性的方法
2012-04-13 20:16:05
295
/*
珠峰培训课堂示例 http://www.zhufengpeixun.cn
setCss方法：给元素设置CSS属性的方法
没有复杂的逻辑关系，但要求处理好以下这几个问题：
1、兼容性问题
2、容错性问题（值上带不带单位）
3、值过大或过小的问题，有的值不能小于0，有的值不能大于1等问题
注：ele.style.height='100px'相当于写成：ele['style']['height']='100px';
这是对象属性的两种不同的写法，后一种写法更灵活
*/
var DOM={};//定义一个对象，把下面的方法都置为此对象的属性，起了一个分组的作用。也叫命名空间。
DOM.setCss=function (ele,attr,svalue){
with(ele){//理解with的用法，这样就把ele当前当前的作用域了，不必在写每一个CSS属性之前再写ele.了
switch(attr){
case 'float'://处理float的兼容性问题
style['cssFloat']=svalue;
style['styleFloat']=svalue;
break;
case 'opacity': //处理不透明度的兼容性问题
//这儿还应该处理一下，因为opacity的值是介于0和1之间的
style['opacity']=svalue;
style['filter']="alpha(opacity:"+svalue*100+")";
break;
case 'width':
case 'height':
case 'borderLeftWidth':
case 'paddingLeft':
case 'paddingBottom':
case 'paddingTop':
case 'paddingRight':
//这些css属性值的特点就是都不能为负数，所以会用max方法运算一下
var reg=/^(-?\d+(?:\.\d+)?)(pt|px|em|in)?$/;
//这个正则相对要完善一点，可以判断带小数的
if(reg.test(svalue)){
var num=RegExp.$1;//取出第一个分组
var danwei=RegExp.$2;//取出第二个分组：单位部分
num=Math.max(0,num);//如果传进来的值是负数，则用0
if(danwei)
svalue=num+danwei;
else
svalue=num+'px';
}
style[attr]=svalue;
break;
case 'top':
case 'marginLeft':
case 'marginRight':
case 'marginTop':
case 'marginBottom':
case 'right':
case 'left':
var reg=/^(-?\d+(?:\.\d+)?)(pt|px|em|in)?$/;
//这个正则相对要完善一点，可以判断带小数的了.
//这个正则可以处理象：2.5em,22px,22,3pt,-10.6in这样的css单位
if(reg.test(svalue)){
//如果符合此正则，则按以下方式处理
var num=RegExp.$1;
var danwei=RegExp.$2;
if(danwei)
//如果是带单位的，则加上单位
svalue=num+danwei;
else
//如果不带单位，则用默认的单位px
svalue=num+'px';
}
style[attr]=svalue;
break;
default:
style[attr]=svalue;
}
}
};
/*
setGrounpCss方法：批量设置css属性的方法
（就是一次给一个或多个元素的多个CSS属性设置值）
第一个参数ele可以是一个元素节点，也可以是多个可以。
第二个参数类似这样：
{height:100,float:'left',width:300,opacity:0.5,lineHeight:'1.5em'}
其实原理就是循环调用上边的setCss方法
*/
DOM.setGrounpCss=function(ele,oCss){
if(oCss&&typeof oCss=='object')
if(ele&&ele.nodeType&&ele.nodeType===1){
for(var attr in oCss){
//用for in循环来遍历JSON对象集合
DOM.setCss(ele,attr,oCss[attr]);
}
}else if(ele&&ele.length&&ele.length>0){
//如果ele一个元素集合，则做两重循环
for(var i=0;i<ele.length;i++){
for(var attr in oCss){
DOM.setCss(ele[i],attr,oCss[attr]);
}
}
}
};
