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. DataSnap修改数据ApplyUpdates出现错误：连接繁忙导致另一个命令

    最近准备尝试用DBExpress做个SQL Serer应用,在学习的时候发现一个问题使用DBExpress连接Sql server 2008 express使用以下控件SQLConnection-&g ...

  2. Android开发--仿微信语音对讲录音

    原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...

  3. ARCGIS Server 发布服务时出现的问题解决

    target='CFH.ConfigurationFactoryHost'  machine='IBM3850X5'  thread='24072'  elapsed='0.31200'>Ser ...

  4. const的位置与区别

    转自  http://www.cnblogs.com/wucx/p/4566176.html 一个比较经典的问题——问以下两种声明的区别:1)  const char * p2)  char * co ...

  5. C# delegate

    1. delegate example1 class Program { public delegate int MyDelegate(int i); int MyFunc(int i) { retu ...

  6. python 连接redis工具类

    #!/usr/bin/python # coding=utf-8 __author__ = 'shuangjiang' import redis import sys default_encoding ...

  7. 点击更多button显示更多数据的功能实现思路代码

    此功能是根据自己思路去慢慢做出来的,做的不够专业,希望有懂这个的前辈给自己指点指点. //分界线———————————————————————————————————————————————————— ...

  8. Android笔记：DrawerLayout抽屉布局的使用

    DrawerLayout(抽屉布局),在各种app中经常出现,比如csdn.. 如下示,只要从屏幕侧边滑一下,或者点击左上角的图标,抽屉就会出来. DrawerLayout要点: 1.使用Drawer ...

  9. 半小时快速了解redis,基于ubuntu 12.04 + redis 2.8.9

    一.什么是redis ? 其官方介绍是: Redis is what is called a key-value store, often referred to as a NoSQL databas ...

  10. EasyUI中Treegrid节点的删除

    // 删除function removes() {    var rows = ruletreegrid.treegrid('getSelections');    if (rows &&am ...