今天上午做一个很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");
任督二脉打通后的代码：
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="确认")
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 }
