First class ,6 examples anlaysisi - hannahgu

http://www.fgm.cc/learn/

First class ,6 examples anlaysisi

  1 <!DOCTYPE html>
  2 <!--
  3 To change this license header, choose License Headers in Project Properties.
  4 To change this template file, choose Tools | Templates
  5 and open the template in the editor.
  6 -->
  7 <html>
  8     <head>
  9         <title>Change Attribute?</title>
 10         <meta charset="UTF-8">
 11         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 12         <style>
 13             * {
 14                 padding:0;
 15                 margin:0;
 16             }
 17             #changeAttr{
 18                 width:370px;
 19                 /*width:auto or 100%, not center*/
 20                 margin:100px auto;
 21                 border:1px solid #000000;
 22                 padding:50px;
 23                 
 24             }
 25             #obj{
 26                 width:150px;
 27                 margin:20px auto;
 28                 height:150px;
 29                 background-color:black;
 30             }
 31         </style>
 32     </head>
 33     <body>
 34         <div id='changeAttr'>
 35             <h1>Change Attribute</h1>
 36             <div id='content'>
 37                 <input id='chWidth' type='button' value='CH WIDTH'/>
 38                 <input id='chHeight' type='button' value='CH HIGHT'/>
 39                 <input id='chColor' type='button' value='CH COLOR'/>
 40                 <input id='chHide' type='button' value='CH HIDE'/>
 41                 <input id='chReset' type='button' value='CH RESET'/>
 42                 <div id='obj'></div>
 43             </div>
 44         </div>
 45         <script>
 46 //            window.onload = function(){
 47 //                var chWidth = document.getElementById("chWidth");
 48 //                var chHeight = document.getElementById("chHeight");
 49 //                var chColor = document.getElementById("chColor");
 50 //                var chHide = document.getElementById("chHide");
 51 //                var chReset = document.getElementById("chReset");
 52 //                var obj = document.getElementById("obj");
 53 //                
 54 //                chWidth.onclick = function(){
 55 //                    obj.style.width = '300px';
 56 //                }
 57 //                chHeight.onclick = function(){
 58 //                    obj.style.height = '300px';
 59 //                }
 60 //                chColor.onclick = function(){
 61 //                    obj.style.backgroundColor = '#ff0000';
 62 //                }
 63 //                chHide.onclick = function(){
 64 //                    obj.style.display = 'none';
 65 //                }
 66 //                chReset.onclick = function(){
 67 //                    obj.style.width = '150px';
 68 //                    obj.style.height = '150px';
 69 //                    obj.style.backgroundColor = '#000000';
 70 //                    obj.style.display = 'block';
 71 //                }
 72 //            }
 73 
 74             
 75 //            var changeStyle = function (elem, attr, value)
 76 //            {
 77 //                    elem.style[attr] = value
 78 //            };
 79 //            window.onload = function ()
 80 //            {
 81 //                    var oBtn = document.getElementsByTagName("input");
 82 //                    var oDiv = document.getElementById("obj");
 83 //                    var oAtt = ["width","height","background","display","display"];
 84 //                    var oVal = ["200px","200px","red","none","block"];
 85 //
 86 //                    for (var i = 0; i < oBtn.length; i++)
 87 //                    {
 88 //                            oBtn[i].index = i;
 89 //                            oBtn[i].onclick = function ()
 90 //                            {
 91 //                                    this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
 92 //                                    console.log(this.index);
 93 //                                    changeStyle(oDiv, oAtt[this.index], oVal[this.index])
 94 //                            }    
 95 //                    }
 96 //            };
 97         
 98         
 99         
100             var changeStyle = function(ele,attr,val){
101                 ele.style[attr] = val;
102             };
103             window.onload = function(){
104                 var oBtn = document.getElementsByTagName("input");
105                 var oDiv = document.getElementById("obj");
106                 var oAttr = ["width","height","backgroundColor","display","display"];
107                 var oVal = ["200px","200px","red","none","block"];
108                 
109                 for(var i=0;i<oBtn.length;i++){
110                     oBtn[i].index = i; 
111                     oBtn[i].onclick = function(){
112                         
113                         this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
114                         //console.log(this.index);
115                         changeStyle(oDiv,oAttr[this.index],oVal[this.index]);
116                     };    
117                 } 
118             }
119             
120         </script>
121     </body>
122 </html>

1.width auto or 100%, not center;

2.good at using for ,like getElementsByTagName('input');

3.this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); like

　　if(a >=5){
　　alert("你好");
　　}
　　可以写成：
　　a >= 5 && alert("你好");

4. look at 3,oDiv.style.cssText = "",all recover,it means add style through js,then the style go to html lines, when you clean style,you just clean style inline,not the style in<style> or stylesheet.

1.首次打开页面时候便已有默认风格
　　不好：在全局里面设置一次风格，然后在onclick里面在写一遍同样的代码
　　改进：在<style>先给风格，只是以后点击会更换风格，减少代码量

2.border:横排有重复边
　　不好：给每个子元素每边都加，然后统一去掉右边框，最好给父元素或最后一个子加一个右边框
　　改进：父每边都有，子统一有右边框，最后去掉最后子的右边框；来回折腾的减少
3.<li>red</li> 加text-indent：-9999px；方便理解

4.去掉外层div ，当里面li：float：left时，ul仍然可以包住li
5.<a href="javascript:;"></a>

1. input 前必须加#content，否则margin-bottom会被#content中的margin覆盖，（优先级不够），by the way,有padding好看多了

#################################################################################

1.text-align：center，对div：block不管用，对inline-block管用
2.子元素float之后，父{width:xxxpx;margin:0 auto;},此时虽然没有包住子，但子依然居中；父加上height，就包住子

#########################################################################

posted on 2015-12-29 21:57 hannahgu 阅读(155) 评论(0) 收藏举报

刷新页面返回顶部


博客园 © 2004-2025 浙公网安备 33010602011771号浙ICP备2021040463号-3

导航