js获取css宽高属性

时间：2015-04-11 10:29:41 　来源：免费模板网　作者：风雪　阅读次数　tagscss运用

有时候网站要用到一些js特效，比如获取css里面某个div的宽或高，或者某个颜色值，这个时候要用到document属性JavaScript设置/读取css函数对象的属性，二个参数, 如果第二个参数是对象, 批量设置属性。　　第一个按钮点击事件，两个参数, 第二个参数为字符串, 读取属性值，两个参数, 第二个参数为对象, 属性批量设置

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数——设置/读取对象的属性</title>
<style> 
div{width:400px;height:200px;background:#fef4eb;border:1px solid #f60;margin:0 auto;}
input{border:0;color:#fff;cursor:pointer;font-weight:700;background:#f60;padding:2px 4px;margin:10px 0 0 10px;}
</style>
<script type="text/javascript"> 
function css(obj, attr, value)
{
	switch (arguments.length)
	{
		case 2:
			if(typeof arguments[1] == "object")
			{	//二个参数, 如果第二个参数是对象, 批量设置属性
				for (var i in attr)obj.style[i] = attr[i]
			}
			else
			{	//二个参数, 如果第二个参数是字符串, 读取属性值
				return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
			}
			break;
		case 3:
			//三个参数, 单一设置属性
			obj.style[attr] = value;
			break;
		default:
			alert("参数错误！")
	}
}
window.onload = function ()
{
	var oBox = document.getElementById("box");
	var aInput = oBox.getElementsByTagName("input");
	
	//第一个按钮点击事件
	aInput[0].onclick = function ()
	{
		//两个参数, 第二个参数为字符串, 读取属性值
		alert("width: " + css(oBox, "width") + "\nheight: " + css(oBox, "height") + "\nbackground-color: " + css(oBox, "backgroundColor"))
	};
	//第二个按钮点击事
	aInput[1].onclick = function ()
	{
		//两个参数, 第二个参数为对象, 属性批量设置
		css(oBox, {width: "330px", height: "100px", borderColor: "#0084ff", backgroundColor: "#eff8ff"});
		//三个参数, 属性单一设置
		for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#0084ff")
	}
	//第三个按钮点击事件
	aInput[2].onclick = function ()
	{
		//两个参数, 第二个参数为对象, 属性批量设置
		css(oBox, {width: "400px", height: "200px", borderColor: "#f60", backgroundColor: "#fef4eb"});
		//三个参数, 属性单一设置
		for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#f60")	
	}
};
</script>
</head>
<body>
<div id="box">
	<input type="button" value="Get Style" /><input type="button" value="Set Style" /><input type="button" value="Default Style" />
</div>
</body>
</html>

上篇：css制作图片放大镜效果

下篇：使用css3制作Freebie标签

本文地址：https://www.freemoban.com/bjrm/2015/0411/1300.html

猜你喜欢