首页 > 代码库 > 第一课 1) 控制div属性 总结

第一课 1) 控制div属性 总结

2024-11-03 14:32:02   208人阅读

 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属性 总结


联系
我们