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. RabbitMQ 入门指南（Java）

    RabbitMQ是一个受欢迎的消息代理,通常用于应用程序之间或者程序的不同组件之间通过消息来进行集成.本文简单介绍了如何使用 RabbitMQ,假定你已经配置好了rabbitmq服务器. Rabbit ...

  2. [delphi]极域学生端解除键盘鼠标锁定退出全屏广播-强制窗口化-源代码

    v2.0  2015-07-11 更新了V2.0 版本 发布在吾爱破解论坛 欢迎下载使用 http://www.52pojie.cn/thread-382769-1-1.html ---------- ...

  3. FreeMaker实现变量求和

        今天在项目上遇到统计分页页面的某个字段的总和,前台页面是使用FreeMaker实现的,记录一下: <#assign tprice = 0 > <#list orderlist ...

  4. Exhange上添加IMAP4

    1.登录到Exchange admim Center,选择servers,双击servers名称,选择IMAP4 2.服务器上查看任务管理器中的服务器,找到exchange imap4两个服务器是否开 ...

  5. HealthKit的使用

    一.项目中关联HealthKit框架 1.在Capabilities选项中打开HealthyKit选项 HealthKit关联路径 首先填写好你项目的Bundle Identifier并且选好Team ...

  6. iphone 开源汇总（转）

    原文地址 http://blog.csdn.net/devday/article/details/6105793 扫描wifi信息: http://code.google.com/p/uwecaugm ...

  7. Android 无标题、全屏设置

    一.在主题中设置无标题.全屏 (一):直接设置主题: android:theme="@android:style/Theme.NoTitleBar.Fullscreen"  // ...

  8. php中$row=mysql_fetch_row()出错问题

    在写php时用到这样一个问题,代码如下: $sql="select * from sina"; mysql_connect("localhost"," ...

  9. Linux Svn 安装过程及配置

    重要的是第一步的安装,第二步配置可能没用,但是没试过,因为服务器上已经安装了第一步. 此处的第二步只为做个记录,说明一下里边的配置文件的用途. 3. 自己实际操作中的的配置记录(参照服务器别人的配置记 ...

  10. 还是要好好研究开源的php

    听说facebook是php写的,还是要静下心来好好研究一番的嘛,踏踏实实点点滴滴的做起来!加油