JavaScript设置/读取css函数对象的属性

2020-01-27 14:17:53

字体：大中小

来源：转载

供稿：网友

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>

上一篇：CSS3制作Freebie标签

下一篇：CSS3放大镜

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注