改变div属性的一个实例

<style>
#outer{width:500px;margin:0 auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}
</style>

<script>
var changeStyle = function (elem, attr, value)
{
　　elem.style[attr] = value
};
window.onload = function ()
{
　　var oBtn = document.getElementsByTagName("input");
　　var oDiv = document.getElementById("div1");
　　var oAtt = ["width","height","background","display","display"];
　　var oVal = ["200px","200px","red","none","block"];

　　for (var i = 0; i < oBtn.length; i++)
　　{
　　　　oBtn[i].index = i;
　　　　oBtn[i].onclick = function ()
　　　　{
　　　　　　this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
　　　　　　changeStyle(oDiv, oAtt[this.index], oVal[this.index])
　　　　}
　　}
};
</script>

<div id="outer">
<input type="button" value="变宽">
<input type="button" value="变高">
<input type="button" value="变色">
<input type="button" value="隐藏">
<input type="button" value="重置">
<div id="div1"></div>
</div>

 

上面是一个关于改变div属性的实例,

1. window.onload函数表示当文档被加载完后才能调用函数,否则不行

 

2.　　　oBtn[i].index = i;
　　　　oBtn[i].onclick = function ()
　　　　{
　　　　　　this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
　　　　　　changeStyle(oDiv, oAtt[this.index], oVal[this.index])
　　　　} 

 为什么要执行oBtn[i].index = i;因为onclick函数里有一个闭包,闭包中若用i代替this.index,则i永远只会取得最终值4,并不会达到理想效果,因此需要做一个拷贝.

 

3.this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

这句只有当index为4时执行,表示点击"重置"按钮时,所有属性都被清除.这里的oDiv.style.cssText = ""属性有一个特点.

     当oDiv的样式为行内样式<div id="div1" style="width: 200px;"></div>时,oDiv.style.cssText = ""会覆盖了这个行内属性,只取到#div1中的属性;

     当oDiv没有任何行内样式,只有#div1{...}时,oDiv.style.cssText = ""对元素的属性没有任何影响.

简答地说,即elem.style.cssText这个属性对非行内样式无任何影响,但却会覆盖行内样式.由此也可发现,通过changeStyle函数改变的属性是被动态地添加到行内.

因此,如果将上述语句修改为:

this.index == oBtn.length - 1 ;

oDiv.style.cssText = "";

很显然,第一句只有在index为4时才取得true,但对其他语句并没有任何影响,而第二句表示不管改变div的哪个按钮,都会先重置上一次添加或修改的属性.