234
內聯 Style 簡寫屬性的發現
內聯 Style 簡寫屬性的發現
開始
平時在使用內聯樣式簡寫屬性的時候，可能沒有考慮到瀏覽器解析的問題。問題不大，簡寫的好處是代碼量少，但最近發現了一個有意思的內聯簡寫屬性的問題。
以下問題僅在內聯樣式裏會出現，如果是通過 style 標簽或 css 文件引入則不會有這樣的問題。
例子
background
設置一個元素的背景色為白色，比如這麼寫：
<div ></div>
你可能以為瀏覽器會這樣輸出：
<div ></div>
一下少了 6 個字節，而瀏覽器的真真實解析情況是：
潛在的問題是：**將會默認設置一些其他的屬性到樣式裏，而通過 CSS 又很難恢複這種默認屬性**。
驗證
我們來驗證一下這個問題：
使用屬性簡寫的瀏覽器呈現：
而非簡寫的呈現：
上麵例子裏的 HTML 代碼：
<div ></div>
那麼：
$0.style.backgroundImage === '' // => false
而如果例子修改為：
<div ></div>
那麼：
$0.style.backgroundImage === '' // => true
font 驗證
另外一個例子是 font 屬性，也會有這個問題：
這個時候：
$0.style.fontWeight === '' // => false
結果：
$0.style.fontWeight === '' // => true
結論
能看到通過 style 獲取元素屬性時會返回非預期結果，所以使用 CSS 處理這類樣式，最好是**隻設置你需要的屬性，盡量不要簡寫，除非你明確知道這個操作的結果**
最後更新：2017-07-26 12:03:39