设置CSS属性的方法,仿jquery的css方法-javascript实例

作者:日期:2011-09-20 17:04:07 点击:278

 /*

珠峰培训 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);
}
}
}
}

上一篇: 获取元素索引值的方法,类似于jQuery的index方法-javascript示例

下一篇: javascript特效:自由落体(加速下落和反弹)