JS 點和中括號

2022-01-11 20:09:24 字數 3508 閱讀 1948

今天上午做乙個很low的小練習,**寫完了想要封裝重複利用來著

可是憋屈啊,怎麼都不對,在document.style.width這裡,想把width變成引數可是用點的話,會報錯說找不到點後邊這個屬性

也是啊,點就是「的」的意思,點後邊放乙個abc代替,他當然會認為你要找style裡邊的abc屬性啊。不妥,固不可、

可以用方括號代替啊!

其實這個用法還是很常見的,像dom二級事件裡就要用到。

估計以後用方括號代替點來解決bug的時候還是很多的,雖然以前學到過,今天用到了就忘得一乾二淨到處抓狂

得get下來,留白、佔位。

「原」**:

1

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

原js**

任督二脈打通後的**:

1

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

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

關鍵注意第三行,style後邊不再是點引用乙個屬性了,而是用了:style["width"] === style.width

html(pug)

1

body

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="確認")

html

css(scss)

1

body 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}

css

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...