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. MySQL_订单类型细分_20161222

    #目前在做一个各城市日订单角度的对比分析,因此需要对订单类型进行一下规整.由于App上产品活动许多,查询了多个表,将订单类型规则进行了统一,优惠券和满减券不能同时使用,创建的这两个表都是以订单ID为k ...

  3. ADURL简化程序

    using System; using System.Diagnostics; using System.Net; using System.Text; using System.Web; using ...

  4. 使用SerialPort 读取外置GPS信息和使用GeoCoordinateWatcher获取内置gps的信息

    简介最近工作中需要读取gps设备的信息,平板本身有内置的gps设备,但是精度不够,就又添加了一个外置的gps.对于外置的gps,我们主要通过SerialPort类来获得串口的信息,然后对接收到的内容进 ...

  5. jquery ajax 前前后后，所有的函数并查询链接

    jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...

  6. 简单的androidStudio 添加Jar包

    感谢http://blog.csdn.net/ta893115871/article/details/46955791博主的文章, 1新建一个空项目 2在项目下添加一个新的moudle 3在该moud ...

  7. 如何在EF CodeFirst中使用唯一约束（Unique）

    一直用EF Fluent Api 做MapConfiguration 所以遇到了唯一约束这个瓶颈 使用唯一约束的两种方式: 方式1 自定义唯一约束 [AttributeUsage(AttributeT ...

  8. 循序渐进Python3（十二） --1--  web框架之django

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为: 大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能 ...

  9. TDI - Transport Driver Interface

    [TDI - Transport Driver Interface] The Transport Driver Interface or TDI is the protocol understood ...

  10. SQL语言

    SQL语言的分类:DDL DML DQL DCL SQL中的操作无非就是(增删改查) DDL:Data Query Language,数据查询语言! 主要是用来定义和维护数据库的各种操作对象,比如库. ...