标签：onload 问题 建议 提交 repeat submit this 隐藏 nts
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:#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])
标签：onload 问题 建议 提交 repeat submit this 隐藏 nts
原文地址：http://www.cnblogs.com/Z-Imp/p/7220199.html
