设置CSS属性的方法,仿jquery的css方法-javascript实例
2011-09-20 17:04:07
366
/*
珠峰培训 2011年9月7日课堂示例
设置css的方法，第一个方法可以解决兼容性问题，比如不透明度的兼性问题
三个参数分别是：ele是需要设置css属性的那个元素,第二个是css的属性，第三个是css属性的值
*/
function addCss(ele,attr,value){
switch(attr){
case 'float'://处理浮动的兼容性问题
ele.style.styleFloat=value;
ele.style.cssFloat=value;
break;
case 'opacity':
ele.style.filter="alpha(opacity:"+value*100+")";
ele.style.opacity=value;//W3C标准浏览器 0-1小数
//IE浏览器 1-100整数
break;
default:
ele.style[attr]=value;
}
}
/*
这个方法是对上一个方法的加强，可以批量的为一组HTML元素增加样式
不过这个方法需要用到上一个方法才行
类似于jQuery的css方法
比如ele这个参数，可以是一个数组，也可以是一个元素集合（比如说ele可以是document.getElementsByTagName('div')）；
attr这个参数可以是{color:'red';height:'100px';width:'200px',float:'left'}
*/
function setCss(ele,attr,value){
if(ele&&ele.nodeType&&ele.nodeType==1)//判断第一个参数是单个的元素的情况
if(typeof attr == 'object'){//如果参数是JSON，则循环方式增加CSS样式
for( var key in attr){
//{float:'left',opacity:0.5}
addCss(ele,key,attr[key]);
}
}else if(typeof attr == 'string'){//如果参数是字符串，则单独增加
addCss(ele,attr,value);
}
//下面这个判断是 判断第一个参数是数组或元素集合的情况
if(ele&&ele.length&&ele.length>0&&ele[0].nodeType&&ele[0].nodeType==1)
{
for(var i=0;i<ele.length;i++){
if(typeof attr == 'object'){//如果参数是JSON，则循环方式增加CSS样式
for( var key in attr){
//{float:'left',opacity:0.5}
addCss(ele[i],key,attr[key]);
}
}else if(typeof attr == 'string'){//如果参数是字符串，则单独增加
addCss(ele[i],attr,value);
}
}
}
}
