第一課 1) 控制div屬性 總結
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>控制div屬性</title> 7 <style> 8 #outer { 9 width: 500px; 10 margin: 0 auto; 11 padding: 0; 12 text-align: center; 13 } 14 15 #div1 {16 width: 100px; 17 height: 100px; 18 background: #000; 19 margin: 10px auto; 20 } 21 </style> 22 <script> 23 var changeStyle = function (elem, attr, value) { 24 elem.style[attr] = value 25 }; 26 window.onload = function () { 27 var oBtn = document.getElementsByTagName("input"); 28 var oDiv = document.getElementById("div1"); 29 var oAtt = ["width", "height", "background", "display", "display"]; 30 var oVal = ["200px", "200px", "red", "none", "block"]; 31 for (var i = 0; i < oBtn.length; i++) { 32 oBtn[i].index = i; 33 oBtn[i].onclick= function () { 34 if (this.index == oBtn.length - 1) { 35 oDiv.style.cssText = ""; 36 } else { 37 changeStyle(oDiv, oAtt[this.index], oVal[this.index]) 38 } 39 } 40 } 41 }; 42 </script> 43 </head> 44 45 <body> 46 <div id="outer"> 47 <input type="button" value="變寬"> 48 <input type="button" value="變高"> 49 <input type="button" value="變色"> 50 <input type="button" value="隱藏"> 51 <input type="button" value="重置"> 52 <div id="div1"></div> 53 </div> 54 55 </body> 56 57 </html>
點擊按鈕變換屬性。
<button>和<input type="button">區別
<button>標簽定義一個按鈕。
在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
<button> 控件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。<button> 與 </button> 標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。例如，我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中創建一個吸引人的標記圖像。
唯一禁止使用的元素是圖像映射，因為它對鼠標和鍵盤敏感的動作會幹擾表單按鈕的行為。
請始終為按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其他瀏覽器中（包括 W3C 規範）的默認值是 "submit"。
如果在 HTML 表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其他瀏覽器將提交 value 屬性的內容。請在 HTML 表單中使用 input 元素來創建按鈕。
background屬性
如何在一個聲明中設置所有背景屬性：
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
background 簡寫屬性在一個聲明中設置所有的背景屬性。
可以設置如下屬性：
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip控制
- background-attachment
- background-image
如果不設置其中的某個值，也不會出問題，比如 background:#ff0000 url(‘smiley.gif‘); 也是允許的。
通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。
class屬性 和 id屬性
class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
div是塊級元素。
&&簡寫
1 this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); 2 changeStyle(oDiv, oAtt[this.index], oVal[this.index])
等同於
1 if (this.index == oBtn.length - 1) { 2 oDiv.style.cssText = " "; 3 } else { 4 changeStyle(oDiv, oAtt[this.inde], oVal[this.index])
第一課 1) 控制div屬性 總結