今天上午做乙個很low的小練習,**寫完了想要封裝重複利用來著
可是憋屈啊,怎麼都不對,在document.style.width這裡,想把width變成引數可是用點的話,會報錯說找不到點後邊這個屬性
也是啊,點就是「的」的意思,點後邊放乙個abc代替,他當然會認為你要找style裡邊的abc屬性啊。不妥,固不可、
可以用方括號代替啊!
其實這個用法還是很常見的,像dom二級事件裡就要用到。
估計以後用方括號代替點來解決bug的時候還是很多的,雖然以前學到過,今天用到了就忘得一乾二淨到處抓狂
得get下來,留白、佔位。
「原」**:
1原js**//change 封裝到我實在無能為力的精簡版
2function
widthfun(a,c)7}
8 widthfun(w200,200);
9 widthfun(w300,300);
10 widthfun(w500,500);
11function
heightfun(a,c)16}
17 heightfun(h200,200);
18 heightfun(h300,300);
19 heightfun(h500,500);
20function
borfun(a,c)25}
26 borfun(bor4,2);
27 borfun(bor6,6);
28 borfun(bor8,8);
29function
bgfun(a,c)34}
35 bgfun(bgred,"red");
36 bgfun(bgyellow,"yellow");
37 bgfun(bgblue,"blue");
任督二脈打通後的**:
1整整少了尼瑪17行啊啊啊。function
clickfun(a,b,c,d)7}
89 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");
關鍵注意第三行,style後邊不再是點引用乙個屬性了,而是用了:style["width"] === style.width
html(pug)
1htmlbody
2div#mask.mask
3h3.mwjs-1-title 點選更改div的樣式
4input#mwjs1btnset(type="button",value="點我設定吧!")
5div#mwjs1byseted.mwjs-1-by-seted
6div#mwjspopwrap
7h4 點選按鈕盡情的設定樣式吧!
8span#mwjspopclose x
9.mwjs-p-wrap
10p
11input.mwjs-1-btn-text(type="button",value="設定寬度:")
12input#mwjswidth200.mwjs-1-seting-cur(type="button",value="200")
13input#mwjswidth300(type="button",value="300")
14input#mwjswidth500(type="button",value="500")
15p
16input.mwjs-1-btn-text(type="button",value="設定高度:")
17input#mwjsheight200(type="button",value="200")
18input#mwjsheight300(type="button",value="300")
19input#mwjsheight500(type="button",value="500")
20p
21input.mwjs-1-btn-text(type="button",value="邊框粗細:")
22input#mwjsborder4(type="button",value="4")
23input#mwjsborder6(type="button",value="6")
24input#mwjsborder8(type="button",value="8")
25p
26input.mwjs-1-btn-text(type="button",value="背景顏色:")
27input#mwjsborderred(type="button",value="紅")
28input#mwjsborderyellow(type="button",value="黃")
29input#mwjsborderblue(type="button",value="藍")
30p.mwjs1-submit-wrap
31input#mwjs1reset(type="button",value="重來")
32 input#mwjs1submit(type="button",value="確認")
css(scss)
1cssbody input[type="button"]12}
13.mwjs-1-by-seted
19.mask
28#mwjspopwrap45p
48h4,.mwjs1-submit-wrap
53h468}
69}70input80}
81.mwjs-1-btn-text92}
93.mwjs1-submit-wrap
111}
112&:hover
115}
116}
117}
js中屬性點 和中括號 的關係。
本來這裡說的是 js 執行乙個字串形式函式的方法。但是呢看到乙個 window test 居然一下子轉不過彎來。這就尷尬了。不是說好了 和 其他都是 什麼的什麼 關係嗎?如 window.onload 表示 window 的載入事件。使用 function fn 定義了乙個函式,和使用 var fn...
JS中的大括號 和中括號 詳解
一 大括號,表示定義乙個物件,大部分情況下要有成對的屬性和值,或是函式。如 var langshen 上面宣告了乙個名為 langshen 的物件,屬性名和值用 冒號 隔開,多個屬性或函式用,逗號 隔開,因為是物件的屬性,所以訪問時,應該用.點 來層層訪問 langshen.name langshe...
js中物件取值的點語法和中括號語法的區別
js中對於物件取值時有兩種方法,一種是點語法,一種是中括號語法.但總有人不清楚什麼時候用哪種.網上其他部落格有的說的不太全.這次詳細的說的介紹一下 中括號語法 任何時候 場合都可使用 適用範圍很廣 點語法 較有侷限性,一下說一下 舉例一 let obj console.log obj.a 123 c...