用原生JS获取非行间样式

用currentStyle,getComputedStyle来获取非行间的CSS样式。同时用可变参arguments来获取和设置CSS样式。

这篇是上一篇js用currentStyle和getComputedStyle获取css样式（非行间）的延伸版，注释的比较清楚。同时还加入了设置样式的css函数。希望对大家有帮助。

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#div1{width:500px; height:200px; background:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS获取非行间样式，封装css函数设置css样式</title>
<script type="text/javascript">
function getStyle(obj,attr)  //获取非行间样式，传两个参数，obj是获取对象，attr是值
{
	if(obj.currentStyle)   //currentStyle针对IE浏览器获取非行间样式
	{
		return obj.currentStyle[attr];  //返回对象的值
	}else
	{
		return getComputedStyle(obj, false)[attr];  //getComputedStyle针对非IE浏览器
	};
};
function css(obj, attr, value)  //传三个参数 对象，样式，值。传参时不一定传3个参数，传2个参数时为获取样式，3个时是设置样式
{
	if(arguments.length==2)  //arguments参数数组，当参数数组长度为2时表示获取css样式
	{
		return getStyle(obj,attr);  //返回对象的非行间样式的值用上面的getStyle函数
	}else
	if(arguments.length==3)  //当传三个参数时为设置对象的某个值
	{
		obj.style[attr]=value;
	}
};
 
window.onload=function()
{
	var oDiv=document.getElementById('div1');
	var oBtn=document.getElementById('btn');
 
	oBtn.onclick=function()
	{
		css(oBtn,'backgroundColor','green');  //传三个参数当点击按钮时把按钮的背景色变成绿色
		alert(css(oDiv, 'width'));  //传两个参数时弹出div的颜色
	};
};
</script>
</head>
 
<body>
<input type="button" value="样式" id="btn" />
<div id="div1"></div>
</body>
</html>

 

posted @ 2012-08-16 11:35  蓝色的梦想  阅读(522)  评论(0)  编辑  收藏  举报