JavaScript設置/讀取css函數對象的屬性

2024-09-05 12:17:15

字體：大中小

來源：轉載

供稿：網友

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   class="iwvjtn8m0"   id="box">	<input type="button" value="Get Style" /><input type="button" value="Set Style" /><input type="button" value="Default Style" /></div></body></html>

上一篇：CSS3放大鏡

下一篇：CSS3制作Freebie標簽