/*
珠峰培训课堂示例 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]);
}
}
}
};