首頁 > web前端 > js教程 > JavaScript中關於font-weight和fontWeight的差別

JavaScript中關於font-weight和fontWeight的差別

黄舟
發布: 2017-07-22 13:23:30
原創
3713 人瀏覽過

今天發現透過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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板