<!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>控制div屬性</title>
<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>
</head>
<body>
<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>
</body>
</html>代碼簡潔高效，但是this.index == oBtn.length - 1 && (oDiv.style.cssText = "");不大懂什么意思
爽心悅目的代碼，但是this.index == oBtn.length - 1 && (oDiv.style.cssText = "");什么意思？
AllySu
2017-10-21 01:22:46
