JS-点和中括号

今天上午做一个很low的小练习，代码写完了想要封装重复利用来着

可是憋屈啊，怎么都不对，在document.style.width这里，想把width变成参数可是用点的话，会报错说找不到点后边这个属性

也是啊，点就是“的”的意思，点后边放一个abc代替，他当然会认为你要找style里边的abc属性啊。不妥，固不可、

听视频听到方括号这里，廓然打通了我的任督二脉，恍然大悟

可以用方括号代替啊！

其实这个用法还是很常见的，像dom二级事件里就要用到。

估计以后用方括号代替点来解决bug的时候还是很多的，虽然以前学到过，今天用到了就忘得一干二净到处抓狂

得get下来，留白、占位。

“原”代码：

 1 //change 封装到我实在无能为力的精简版
 2     function widthFun(a,c){
 3         a.onclick = function(){
 4             beSet.style.width = c+"px";
 5             this.className = "mwjs-1-seting-cur";
 6         }
 7     }
 8     widthFun(w200,200);
 9     widthFun(w300,300);
10     widthFun(w500,500);
11     function heightFun(a,c){
12         a.onclick = function(){
13             beSet.style.height = c+"px";
14             this.className = "mwjs-1-seting-cur";
15         }
16     }
17     heightFun(h200,200);
18     heightFun(h300,300);
19     heightFun(h500,500);
20     function borFun(a,c){
21         a.onclick = function(){
22             beSet.style.borderWidth = c+"px";
23             this.className = "mwjs-1-seting-cur";
24         }
25     }
26     borFun(bor4,2);
27     borFun(bor6,6);
28     borFun(bor8,8);
29     function bgFun(a,c){
30         a.onclick = function(){
31             beSet.style.backgroundColor = c;
32             this.className = "mwjs-1-seting-cur";
33         }
34     }
35     bgFun(bgRed,"red");
36     bgFun(bgYellow,"yellow");
37     bgFun(bgBlue,"blue");
原js代码

任督二脉打通后的代码：

 1     function clickFun(a,b,c,d){
 2         a.onclick = function(){
 3             beSet.style[b] = d;
 4             beSet.style[b] = c+"px";
 5             this.className = "mwjs-1-seting-cur";
 6         }
 7     }
 8 
 9     clickFun(w200,"width","200");
10     clickFun(w300,"width","300");
11     clickFun(w500,"width","500");
12     clickFun(h200,"height","200");
13     clickFun(h300,"height","300");
14     clickFun(h500,"height","500");
15     clickFun(bor4,"borderWidth","4");
16     clickFun(bor6,"borderWidth","6");
17     clickFun(bor8,"borderWidth","8");
18     clickFun(bgRed,"backgroundColor","","red");
19     clickFun(bgYellow,"backgroundColor","","yellow");
20     clickFun(bgBlue,"backgroundColor","","blue");

 整整少了尼玛17行啊啊啊。

关键注意第三行，style后边不再是点引用一个属性了，而是用了[]:style["width"] === style.width

html(pug)

 1 body
 2         div#mask.mask
 3         h3.mwjs-1-title 点击更改div的样式
 4             input#mwjs1BtnSet(type="button",value="点我设置吧!")
 5         div#mwjs1bySeted.mwjs-1-by-seted
 6         div#mwjsPopWrap
 7             h4 点击按钮尽情的设置样式吧！
 8                 span#mwjsPopClose X
 9             .mwjs-p-wrap
10                 p 
11                     input.mwjs-1-btn-text(type="button",value="设置宽度：")
12                     input#mwjsWidth200.mwjs-1-seting-cur(type="button",value="200")
13                     input#mwjsWidth300(type="button",value="300")
14                     input#mwjsWidth500(type="button",value="500")
15                 p 
16                     input.mwjs-1-btn-text(type="button",value="设置高度：")
17                     input#mwjsHeight200(type="button",value="200")
18                     input#mwjsHeight300(type="button",value="300")
19                     input#mwjsHeight500(type="button",value="500")
20                 p 
21                     input.mwjs-1-btn-text(type="button",value="边框粗细：")
22                     input#mwjsBorder4(type="button",value="4")
23                     input#mwjsBorder6(type="button",value="6")
24                     input#mwjsBorder8(type="button",value="8")
25                 p 
26                     input.mwjs-1-btn-text(type="button",value="背景颜色：")
27                     input#mwjsBorderRed(type="button",value="红")
28                     input#mwjsBorderYellow(type="button",value="黄")
29                     input#mwjsBorderBlue(type="button",value="蓝")
30             p.mwjs1-submit-wrap
31                 input#mwjs1Reset(type="button",value="重来")
32                 input#mwjs1Submit(type="button",value="确认")
html

css（scss）

  1 body input[type="button"]{
  2         margin-left: 10px;
  3         background: #3b8cff;
  4         color: #fff;
  5         font-size: 14px;
  6         padding: 10px;
  7         border: none;
  8         outline: none;
  9         &:hover{
 10             background: #2c6fce;
 11         }
 12     }
 13 .mwjs-1-by-seted{
 14     width: 100px;
 15     height: 100px;
 16     border: 1px solid #000;
 17     margin: 10px 20px;
 18 }
 19 .mask{
 20     display: none;
 21     position: absolute;
 22     top: 0;
 23     left: 0;
 24     background: url("../images/mask.png") repeat;
 25     width: 100%;
 26     height: 100%;
 27 }
 28 #mwjsPopWrap{
 29     display: none;
 30     position: absolute;
 31     top: 0;
 32     left: 0;
 33     right: 0;
 34     bottom: 0;
 35     z-index: 999;
 36     width: 300px;
 37     margin: auto;
 38     text-align: left;
 39     height: 300px;
 40     background: #fff;
 41     padding: 40px;
 42     .mwjs-p-wrap{
 43         margin-top: 40px;
 44     }
 45     p{
 46         margin: 0 0 15px 0;
 47     }
 48     h4,.mwjs1-submit-wrap{
 49         position: relative;
 50         text-align: center;
 51         margin: 0 0 15px 0;
 52     }
 53     h4{
 54         span{
 55             position: absolute;
 56         top: -30px;
 57         right: -30px;
 58         width: 30px;
 59         height: 30px;
 60         border-radius: 50%;
 61         color: #999;
 62         line-height: 30px;
 63         &:hover{
 64             background: #e8e8e8;
 65             color: #333;
 66                 cursor: pointer;
 67         }
 68         }
 69     }
 70     input{
 71         width: 50px;
 72         border: 1px solid #999;
 73         border-radius: 5px;
 74         background: #fff;
 75         color: #333;
 76         padding: 5px 10px;
 77         &:hover,&.mwjs-1-seting-cur{
 78             background: #e8e8e8;
 79         }
 80     }
 81     .mwjs-1-btn-text{
 82         width: 80px;
 83         margin: 0;
 84         background: #fff;
 85         color: #333;
 86         border: none;
 87         &:hover{
 88             cursor: text;
 89             background: #fff;
 90             color: #333;
 91         }
 92     }
 93     .mwjs1-submit-wrap{
 94         margin-top: 40px;
 95             input{
 96                 background: #3b8cff;
 97                 color: #fff;
 98                 font-size: 14px;
 99                 width: auto;
100                 padding: 10px 30px;
101                 border: 1px solid #2c6fce;
102                 outline: none;
103                 border-radius: 0;
104                 margin: 10px 15px;
105                 &#mwjs1Reset{
106                     background: #c8c8c8;
107                     border: 1px solid #b2b2b2;
108                     &:hover{
109                         background: #b2b2b2;
110                     }
111                 }
112                 &:hover{
113                     background: #2c6fce;
114                 }
115             }
116     }
117 }
css

 

posted @ 2017-08-17 16:39  xing.org1^  阅读(660)  评论(0)  编辑  收藏  举报