zoukankan      html  css  js  c++  java
  • 小练习涨姿势(一)

    最经发现了一个各种js效果集合的网站,http://js.fgm.cc/learn/

    于是乎自己就跟着温习了一遍JS代码,还真涨了不少姿势。

     1 <!DOCTYPE html>
     2 <html>
     3 <meta charset="utf-8">
     4 <head>
     5 <title>控制DIV属性</title>
     6 <style>
     7 #outer{500px;margin:0 auto;padding:20px;text-align: center;}
     8 #inner{100px;height:100px;margin:10px auto;background:#000;}
     9 </style>
    10 <script>
    11 function changeStyle(ele,attr,value){
    12     ele.style[attr]=value;
    13 }
    14 window.onload=function(){
    15     var aBtn=document.getElementsByTagName('input');
    16     var oDiv=document.getElementById('inner');
    17 
    18     var attr=['width','height','backgroundColor','display','display','display'];
    19     var value=['200px','200px','#920','none','block','block'];
    20 
    21     for(var i=0;i<aBtn.length;i++){
    22         aBtn[i].index=i;
    23         aBtn[i].onclick=function(){
    32             this.index==aBtn.length-1 && (oDiv.style.cssText='');
    34             changeStyle(oDiv,attr[this.index],value[this.index]);
    35         }
    36     }
    37 }
    38 </script>
    39 </head>
    40 <body>
    41 <div id="outer">
    42     <input type="button" value="变宽" />
    43     <input type="button" value="变高" />
    44     <input type="button" value="变色" />
    45     <input type="button" value="隐藏" />
    46     <input type="button" value="显示" />
    47     <input type="button" value="重置" />
    48     <div id="inner"></div>
    49 </div>
    50 </body>
    51 </html>
    看到标记这段代码,我崩溃了,还可以这样写?
    原来标记处代码等同于下面,顿时了解了。
    1 if(this.index=aBtn.length-1){
    2   oDiv.style.cssText='';
    3 }

    实现原理就是我们常见的开关原理,如果第一个表达式为false,则下面不再执行.如果为true,则执行第二个表达式。

    具体用法参见:蓝色理想http://bbs.blueidea.com/thread-2947561-1-1.html

    这时又冒出一个问题,cssText是什么?

    上W3CSchool查找了一下,果然有:http://www.w3school.com.cn/htmldom/dom_obj_style.asp,但是讲的不是太清楚。

    若想仔细看看,到这里:http://www.cnblogs.com/snandy/archive/2011/03/12/1980444.html

    是不是足够偷懒,还请原谅哈。。。

     
  • 相关阅读:
    Consul常用命令
    ECharts 避免变窄
    TP3.2 日期默认格式
    新订单提示效果
    php 按照字典序排序 微信卡券签名算法用到
    td宽度自适应 窄的地方自动收缩
    git 删除本地分支,删除远程分支
    分页Model
    chrome表单自动填充如何取消
    tp3.2 如何比较两个字段
  • 原文地址:https://www.cnblogs.com/gresic/p/3418551.html
Copyright © 2011-2022 走看看