<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属性的实例,
window.onload函数表示当文档被加载完后才能调用函数,否则不行
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
这句只有当index为4时执行,表示点击"重置"按钮时,所有属性都被清除.这里的oDiv.style.cssText = ""属性有一个特点.
1.当oDiv的样式为行内样式<div id="div1" style="width: 200px;"></div>时,oDiv.style.cssText = ""会覆盖了这个行内属性,只取到#div1中的属性
2.当oDiv没有任何行内样式,只有#div1{...}时,oDiv.style.cssText = ""对元素的属性没有任何影响.
简答地说,即elem.style.cssText这个属性对非行内样式无任何影响,但却会覆盖行内样式.由此也可发现,通过changeStyle函数改变的属性是被动态地添加到行内.
因此,如果将上述语句修改为:
this.index == oBtn.length - 1 ;
oDiv.style.cssText = "";
很显然,第一句只有在index为4时才取得true,但对其他语句并没有任何影响,而第二句表示不管改变div的哪个按钮,都会先重置上一次添加或修改的属性.