最经发现了一个各种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
是不是足够偷懒,还请原谅哈。。。