今天上午做一个很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行啊啊啊。
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 }