今天發現透過JS來設定一個元素的CSS樣式,程式碼如下所示:
var js = document.getElementById('test-p'); js.style['font-weight'] = 'bold';
之後發現一個很奇怪的地方。 。我們透過
console.log(js.style.fontWeight); console.log(js.style['font-weight']); console.log(js.style['fontWeight']);
都可以在控制台輸出之前設定的bold,或是我們之前設定js.style.fontWeight = 'bold';就算我們是在CSS裡面直接設定{font-weight: bold} ;也可以用上面三個方式在控制台輸出設定的bold。
如果直接console.log(js.style);輸出的這個物件中沒有發現'font-weight'這個屬性,只有'fontWeight',請問一下各位大大,這是為什麼,為什麼我們在這裡的'font-weight'和'fontWeight'會出現這種'等價'的情況,新手錶示完全弄懵了,謝謝解答的各位。
在JS中,「-」代表減法運算子。所以font-weight代表font減去weight,test-p相當於test減p。
這是駝峰寫法
js.style.font-weight 直接這樣寫會出錯的
要么寫成駝峰寫法
js.style.fontWeight
#要么寫成style ['property']
javascript作為瀏覽器腳本,自然要能夠操縱css等東西
這裡有個問題: css許多屬性都以-作連接號,而javascript中,對象的屬性絕不可以出現減號
於是,機智的作者靈光一閃: 不如在js裡就用駝峰命名來訪問css屬性吧,這樣看起來就不會太挫
從此,存取css屬性時,你既可以用駝峰命名,也可以用減號連接命名了
以上是JavaScript中關於font-weight和fontWeight的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!