JS-点和中括号

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

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

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

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

可以用方括号代替啊！

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

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

得get下来，留白、占位。

“原”代码：

 //change 封装到我实在无能为力的精简版
     function widthFun(a,c){
         a.onclick = function(){
             beSet.style.width = c+"px";
             this.className = "mwjs-1-seting-cur";
         }
     }
     widthFun(w200,200);
     widthFun(w300,300);
     widthFun(w500,500);
     function heightFun(a,c){
         a.onclick = function(){
             beSet.style.height = c+"px";
             this.className = "mwjs-1-seting-cur";
         }
     }
     heightFun(h200,200);
     heightFun(h300,300);
     heightFun(h500,500);
     function borFun(a,c){
         a.onclick = function(){
             beSet.style.borderWidth = c+"px";
             this.className = "mwjs-1-seting-cur";
         }
     }
     borFun(bor4,2);
     borFun(bor6,6);
     borFun(bor8,8);
     function bgFun(a,c){
         a.onclick = function(){
             beSet.style.backgroundColor = c;
             this.className = "mwjs-1-seting-cur";
         }
     }
     bgFun(bgRed,"red");
     bgFun(bgYellow,"yellow");
     bgFun(bgBlue,"blue");

原js代码

任督二脉打通后的代码：

     function clickFun(a,b,c,d){
         a.onclick = function(){
             beSet.style[b] = d;
             beSet.style[b] = c+"px";
             this.className = "mwjs-1-seting-cur";
         }
     }

     clickFun(w200,"width","200");
     clickFun(w300,"width","300");
     clickFun(w500,"width","500");
     clickFun(h200,"height","200");
     clickFun(h300,"height","300");
     clickFun(h500,"height","500");
     clickFun(bor4,"borderWidth","4");
     clickFun(bor6,"borderWidth","6");
     clickFun(bor8,"borderWidth","8");
     clickFun(bgRed,"backgroundColor","","red");
     clickFun(bgYellow,"backgroundColor","","yellow");
     clickFun(bgBlue,"backgroundColor","","blue");

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

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

html(pug)

 body
         div#mask.mask
         h3.mwjs-1-title 点击更改div的样式
             input#mwjs1BtnSet(type="button",value="点我设置吧!")
         div#mwjs1bySeted.mwjs-1-by-seted
         div#mwjsPopWrap
             h4 点击按钮尽情的设置样式吧！
                 span#mwjsPopClose X
             .mwjs-p-wrap
                 p
                     input.mwjs-1-btn-text(type="button",value="设置宽度：")
                     input#mwjsWidth200.mwjs-1-seting-cur(type="button",value="200")
                     input#mwjsWidth300(type="button",value="300")
                     input#mwjsWidth500(type="button",value="500")
                 p
                     input.mwjs-1-btn-text(type="button",value="设置高度：")
                     input#mwjsHeight200(type="button",value="200")
                     input#mwjsHeight300(type="button",value="300")
                     input#mwjsHeight500(type="button",value="500")
                 p
                     input.mwjs-1-btn-text(type="button",value="边框粗细：")
                     input#mwjsBorder4(type="button",value="4")
                     input#mwjsBorder6(type="button",value="6")
                     input#mwjsBorder8(type="button",value="8")
                 p
                     input.mwjs-1-btn-text(type="button",value="背景颜色：")
                     input#mwjsBorderRed(type="button",value="红")
                     input#mwjsBorderYellow(type="button",value="黄")
                     input#mwjsBorderBlue(type="button",value="蓝")
             p.mwjs1-submit-wrap
                 input#mwjs1Reset(type="button",value="重来")
                 input#mwjs1Submit(type="button",value="确认")

html

css（scss）

 body input[type="button"]{
         margin-left: 10px;
         background: #3b8cff;
         color: #fff;
         font-size: 14px;
         padding: 10px;
         border: none;
         outline: none;
         &:hover{
             background: #2c6fce;
         }
     }
 .mwjs-1-by-seted{
     width: 100px;
     height: 100px;
     border: 1px solid #000;
     margin: 10px 20px;
 }
 .mask{
     display: none;
     position: absolute;
     top:;
     left:;
     background: url("../images/mask.png") repeat;
     width: 100%;
     height: 100%;
 }
 #mwjsPopWrap{
     display: none;
     position: absolute;
     top:;
     left:;
     right:;
     bottom:;
     z-index:;
     width: 300px;
     margin: auto;
     text-align: left;
     height: 300px;
     background: #fff;
     padding: 40px;
     .mwjs-p-wrap{
         margin-top: 40px;
     }
     p{
         margin: 0 0 15px 0;
     }
     h4,.mwjs1-submit-wrap{
         position: relative;
         text-align: center;
         margin: 0 0 15px 0;
     }
     h4{
         span{
             position: absolute;
         top: -30px;
         right: -30px;
         width: 30px;
         height: 30px;
         border-radius: 50%;
         color: #999;
         line-height: 30px;
         &:hover{
             background: #e8e8e8;
             color: #333;
                 cursor: pointer;
         }
         }
     }
     input{
         width: 50px;
         border: 1px solid #999;
         border-radius: 5px;
         background: #fff;
         color: #333;
         padding: 5px 10px;
         &:hover,&.mwjs-1-seting-cur{
             background: #e8e8e8;
         }
     }
     .mwjs-1-btn-text{
         width: 80px;
         margin:;
         background: #fff;
         color: #333;
         border: none;
         &:hover{
             cursor: text;
             background: #fff;
             color: #333;
         }
     }
     .mwjs1-submit-wrap{
         margin-top: 40px;
             input{
                 background: #3b8cff;
                 color: #fff;
                 font-size: 14px;
                 width: auto;
                 padding: 10px 30px;
                 border: 1px solid #2c6fce;
                 outline: none;
                 border-radius:;
                 margin: 10px 15px;
                 &#mwjs1Reset{
                     background: #c8c8c8;
                     border: 1px solid #b2b2b2;
                     &:hover{
                         background: #b2b2b2;
                     }
                 }
                 &:hover{
                     background: #2c6fce;
                 }
             }
     }
 }    

css