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-wrap10                 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-wrap31                 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