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

First class ,6 examples anlaysisi

 <!DOCTYPE html>

 <!--

 To change this license header, choose License Headers in Project Properties.

 To change this template file, choose Tools | Templates

 and open the template in the editor.

 -->

 <html>

     <head>

         <title>Change Attribute?</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <style>

             * {

                 padding:0;

                 margin:0;

             }

             #changeAttr{

                 width:370px;

                 /*width:auto or 100%, not center*/

                 margin:100px auto;

                 border:1px solid #000000;

                 padding:50px;

             }

             #obj{

                 width:150px;

                 margin:20px auto;

                 height:150px;

                 background-color:black;

             }

         </style>

     </head>

     <body>

         <div id='changeAttr'>

             <h1>Change Attribute</h1>

             <div id='content'>

                 <input id='chWidth' type='button' value='CH WIDTH'/>

                 <input id='chHeight' type='button' value='CH HIGHT'/>

                 <input id='chColor' type='button' value='CH COLOR'/>

                 <input id='chHide' type='button' value='CH HIDE'/>

                 <input id='chReset' type='button' value='CH RESET'/>

                 <div id='obj'></div>

             </div>

         </div>

         <script>

 //            window.onload = function(){

 //                var chWidth = document.getElementById("chWidth");

 //                var chHeight = document.getElementById("chHeight");

 //                var chColor = document.getElementById("chColor");

 //                var chHide = document.getElementById("chHide");

 //                var chReset = document.getElementById("chReset");

 //                var obj = document.getElementById("obj");

 //

 //                chWidth.onclick = function(){

 //                    obj.style.width = '300px';

 //                }

 //                chHeight.onclick = function(){

 //                    obj.style.height = '300px';

 //                }

 //                chColor.onclick = function(){

 //                    obj.style.backgroundColor = '#ff0000';

 //                }

 //                chHide.onclick = function(){

 //                    obj.style.display = 'none';

 //                }

 //                chReset.onclick = function(){

 //                    obj.style.width = '150px';

 //                    obj.style.height = '150px';

 //                    obj.style.backgroundColor = '#000000';

 //                    obj.style.display = 'block';

 //                }

 //            }

 //            var changeStyle = function (elem, attr, value)

 //            {

 //                    elem.style[attr] = value

 //            };

 //            window.onload = function ()

 //            {

 //                    var oBtn = document.getElementsByTagName("input");

 //                    var oDiv = document.getElementById("obj");

 //                    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 = "");

 //                                    console.log(this.index);

 //                                    changeStyle(oDiv, oAtt[this.index], oVal[this.index])

 //                            }

 //                    }

 //            };

             var changeStyle = function(ele,attr,val){

                 ele.style[attr] = val;

             };

             window.onload = function(){

                 var oBtn = document.getElementsByTagName("input");

                 var oDiv = document.getElementById("obj");

                 var oAttr = ["width","height","backgroundColor","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 = "");

                         //console.log(this.index);

                         changeStyle(oDiv,oAttr[this.index],oVal[this.index]);

                     };

                 }

             }

         </script>

     </body>

 </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，就包住子

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

First class ,6 examples anlaysisi的更多相关文章

  1. Js: Extensible Calendar Examples

    http://ext.ensible.comhttps://github.com/bmoeskau/Extensiblehttps://github.com/TeamupCom/extensibleh ...

  2. Selenium Xpath Tutorials - Identifying xpath for element with examples to use in selenium

    Xpath in selenium is close to must required. XPath is element locator and you need to provide xpath ...

  3. https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/

        https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/ ...

  4. (转载)SQL Reporting Services (Expression Examples)

    https://msdn.microsoft.com/en-us/library/ms157328(v=SQL.100).aspx Expressions are used frequently in ...

  5. Examples of MIB Variables - SNMP Tutorial

    30.5 Examples of MIB Variables Versions 1 and 2 of SNMP each collected variables together in a singl ...

  6. DataBinding examples

    Databinding in Windows Forms demo (CSWinFormDataBinding) /************************************* Modu ...

  7. https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

    https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

  8. Bootstrap Table Examples

    The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

  9. RSpec shared examples with template methods

    It’s pretty common to have multiple tests that are nearly the same. In one app, we support bidding o ...

随机推荐

  1. Android之官方下拉刷新控件SwipeRefreshLayout

    SwipeRefreshLayout 是在V4包里面,首先要先导入V4包,最新的V4包里面才有这控件 首先是布局 <android.support.v4.widget.SwipeRefreshL ...

  2. HMC破解控制台密码

    一般我们装完HMC以后默认的登录控制台的账户是:admin 密码:abc123当我们可以自创建登录账户后,忘记密码了怎么办? 这里有两种方法: 1 由于HMC是suse系统,基于linux内核的,所以 ...

  3. Python全栈开发day9

    一.面向对象进阶 1．利用python反射查看面向对象成员 对于对象:反射既可以找对象,类的成员 对于类:反射只能找类中的成员 2．利用反射操作模块(查找类,创建对象,查找对象中字段) 1 2 3 4 ...

  4. Python 操作FTP

    import sys, os, ftplib, socket CONST_HOST = "FTP服务器地址" CONST_USERNAME = "FTP用户名" ...

  5. BASE64编码和解码（VC源代码） 并 内存加载 CImage 图像

      BASE64可以用来将binary的字节序列数据编码成ASCII字符序列构成的文本.完整的BASE64定义可见 RFC1421和 RFC2045.编码后的数据比原始数据略长,为原来的4/3.在电子 ...

  6. NOR Flash擦写和原理分析

    NOR Flash擦写和原理分析 1. NOR FLASH 的简单介绍 NOR FLASH 是很常见的一种存储芯片,数据掉电不会丢失.NOR FLASH支持Execute On Chip,即程序可以直 ...

  7. textview 弹出键盘上面添加完成按钮，并设置输入内容的格式。

    - (void)setContentView{ self.contentTextView = [[UITextView alloc]initWithFrame:CGRectMake(11, 70, S ...

  8. Git命令学习摘要

    1.git init  --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...

  9. nginx重启

    ps aux | grep nginx 查找 主进程 号 kill 9666 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.co ...

  10. 第13章 .NET应用程序配置

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...