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");

任督二脉打通后的代码:

 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 }    

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mathor

概率论与数理统计(一)

11940
来自专栏Jack的Android之旅

android自定义钟表android自定义钟表

接下来就是设定这个自定义View的大小,在没有大小自适应的时候,view的高度我这位整个手机屏幕高度的三分之一,宽度为整个屏幕的宽度

10110
来自专栏肖蕾的博客

第十四章:TouchPadTouchPadStyleTouchPad控件

API定义:TouchPad的样式 用法:public TouchpadStyle(Drawable background, Drawable knob) ...

7520
来自专栏Google Dart

Flutte部件目录-基本部件(三) 顶

要显示snackbar或持久底部表,请通过Scaffold.of获取当前BuildContext的ScaffoldState,然后使用ScaffoldState...

30610
来自专栏前端笔记

【 图形游戏 Tetris 】原生 JavaScript 做小游戏

俄罗斯方块 (俄罗斯开发经典游戏) 游戏简介 《俄罗斯方块》(Tetris, 俄文:Тетрис)是一款由俄罗斯人阿列克谢·帕基特诺夫于1984年6月发明的休闲...

351100
来自专栏青蛙要fly的专栏

项目需求讨论- 自定义滚轮(第二波新实现)

大家好,在前段时间我写过用ScrollView实现了自定义滚轮,但是在循环的效果不是特别好。(这次文章底部附上了Demo。O(∩_∩)O~)

10720
来自专栏个人随笔

初识jQuery 基础篇

首先提供一个知识点外资源: 在线编程:无需编程环境:   https://codepen.io/pen   添加jQuery库:     Settings-->...

37560
来自专栏Android知识点总结

看得见的数据结构Android版之栈篇

进入和弹出动画为了好区分,用两个 ValueAnimator 控制,下面是成员变量

12520
来自专栏听雨堂

页面布局的一些心得

关于表格: 1. 表格用于控制大的板块比较好,居中很方便。同行同列等相对位置不会错乱。 2. 表格难于精确控制,由于历史长,表格属性,css等都能控制,也容易混...

19350
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

11620

扫码关注云+社区

领取腾讯云代金券