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. post请求接口

    /// <summary> /// post 调用接口 /// </summary> /// <param name="xmlRequest"> ...

  2. myeclicps开发web时候复制一个工程改名字后执行出现404错误

    当部署的时候会出现如下的警告,此时请按照如下的方法解决: 1.选择要运行的工程,右击-->properties-->在上边的搜索框中搜索web,选中web,将Web Context-roo ...

  3. 发现IE7的一个问题，不能用索引取字符串中的单个字符

    如下javascript: var testValue="hello,world"; alert(testValue[]); 在IE7上运行该代码,竟然提示值为"unde ...

  4. beautifulsoup小节

    在beautifulsoup中,一个tag可能有很多个属性. tag <b class="boldest"> 有一个 “class” 的属性,值为 “boldest” ...

  5. 全面总结sizeof的用法（定义、语法、指针变量、数组、结构体、类、联合体、位域位段）

    一.前言 编译环境是vs2010(32位). <span style="font-size:18px;">#include<iostream> #inclu ...

  6. fedora23 tweak tool不工作解决方案

    在启动器中打开 优化工具 失败 在终端中开启显示 Traceback (most recent call last): File "/usr/bin/gnome-tweak-tool&quo ...

  7. Memento(备忘录）-对象行为型模式

    1.意图 在布破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将对象恢复到原先保存的状态. 2.别名 Token 3.动机 为了允许用户取消不确定的操作或从错误中 ...

  8. ANDROID开发之问题积累及解决方案（二）

    错误:“Binary XML file line # : Error inflating class” 原因:此异常是布局文件中有错引起的,那么返回到布局文件中看看. <?xml version ...

  9. c#窗体虚线图形验证码设计

    /************************窗体验证码背景图形设计及核心代码**********/ using System;using System.Collections.Generic;u ...

  10. iOS修改button的点击范围

    一般来说,按钮的点击范围是跟按钮的大小一样的.若按钮很小时,想增大点击区域,网上通用的方法有①设置btn图片setImage,然后将btn的size设置的比图片大②在btn上添加一个比较大的透明btn ...