JS學習筆記 - 多按鈕控制同個div屬性
阿新 • • 發佈：2019-01-06
總結：
1. 注意body裡的結構安排，全部裝在大div，避免多次設定不同部分居中。
2. 一排按鈕居中：裝在大div裡，text-align: center;
3. 把相同的部分封裝成函式，即 同個 oDiv，都是attr 屬性 設定 value。
var changeStyle = function (elem, attr, value)
{
elem.style[attr] = value
};
4. 用陣列的方式，把每個要設定的attr 和 對應的 value 裝起來，直接到數組裡用this.index呼叫， 避免程式碼重複。
var oAtt = ["width","height","background","display","display"]; var oVal = ["200px","200px","red","none","block"];
5. 用for迴圈 來加點選事件，獲取當前點選的按鈕，並呼叫前面封裝的設定屬性的函式。 避免程式碼重複。
this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
且運算子，當第一個條件成立時，才執行第二步。
即，當oBtn[i]是最後一個按鈕的時候，才把cssText設定為空。 即重置樣式。
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]) }; };
<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>