小练习涨姿势（一）

最新推荐文章于 2021-07-24 23:22:05 发布

转载最新推荐文章于 2021-07-24 23:22:05 发布 · 100 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gresic/p/3418551.html

本文通过解析一段复杂的JavaScript代码片段，详细解释了如何使用JavaScript动态改变HTML元素的CSS样式属性，并深入探讨了CSSText的应用场景及其实现原理。文章结合实例，帮助读者掌握JavaScript与CSS交互的关键技巧。

最经发现了一个各种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{width:500px;margin:0 auto;padding:20px;text-align: center;}
 8 #inner{width: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

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

转载于:https://www.cnblogs.com/gresic/p/3418551.html