用原生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{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>

 

原文地址:https://www.cnblogs.com/webtall/p/2642026.html