溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
樣式這個東西我想大家都不陌生，沒有樣式整個頁面一下也就失去的光彩，所以樣式（style）的重要性就不言而喻了。
那么一個元素到底支持多少個樣式呢？可能有人會說這事得 W3C 說的算。
其實，這事 W3C 說的也不算，為什么呢？因為 W3C 就算上面有，但是瀏覽器中如果沒有的話，那一切都沒有意義，因為瀏覽器不支持，W3C 把這個樣式說的再好再棒也沒有用。
好，那既然檢測元素樣式的唯一標準是瀏覽器的話，那么問題來了。對于一個最簡單的 div 元素瀏覽器到底支持它多少種樣式呢？
當然這里我們要說到一個比較常用獲取元素樣式的方法：getComputedStyle
咱們先簡單說說 getComputedStyle 的用法，看名字就知道它跟樣式有關，如果按照英文翻譯的話就是：
get 獲取
Computed 計算
Style 樣式
也就是說，這個方法可以幫助咱們獲取一個元素在實際最后需要計算的樣式數值。
最簡單的使用方法就是，首先是有兩個參數，元素和偽類。第二個參數不是必須的，當不查詢偽類元素的時候可以忽略或者傳入 null。
使用示例：
getComputedStyle(獲取的元素,偽類名字)[樣式名字]
例如：
<style>
*{margin:0;padding:0}
#myDiv{width:200px;height:300px;background:red;}
#myDiv:after{
width:50px;height:30px;content: '';background: yellow;
}
</style>
<body>
<div id='myDiv'>Leo</div>
<body><script>
console.log(getComputedStyle(myDiv,null)['width'])//'200px'
console.log(getComputedStyle(myDiv,':after')['width'])//'50px'
console.log(myDiv.style.width)//''
</script>我們能看到他可以輕易獲取元素樣式和元素偽類的樣式值，并且它和element.style的區別。
element.style 讀取的只是元素的“內聯樣式”，即 寫在元素的 style 屬性上的樣式；而 getComputedStyle 讀取的樣式是最終樣式，包括了“內聯樣式”、“嵌入樣式”和“外部樣式”。
但是，element.style 既支持讀也支持寫，而 getComputedStyle 僅支持讀并不支持寫入。
當然有的同學看到這就會問，老師，那它和元素瀏覽器到底支持它多少種樣式有什么關系呢？
答案是：有，而且是相當有。
細心的同學可能已經看出來了，它的使用方法是后面使用了一個中括號然后放入了樣式就會返回出最后元素的計算的樣式數值。有沒有發現它和 JavaScript 中的一個數據類型的使用方法很像呢？
沒錯，就是 JSON。
你會發現 JSON 也是支持后面放入中括號然后放入字符串，如果有該屬性就會返回該屬性的value。也就是所謂的鍵值對(“key = value”)。所以也就是說如果不加上后面的中括號本身直接使用 getComputedStyle 會把這個對象返回出來，而這個大對象中包含了所有的樣式，只不過我們平時用的時候只是在后面加上了 key 把 value 取到而已。
咱們以 Chrome 瀏覽器為例，當然各位同學可以嘗試一下：
console.log(getComputedStyle(myDiv));//
你會發現好長好長的，而且沒顯示完的一個巨大的對象，大家也可以點開這個對象，這個對象中包含了這個元素可以使用的所有的 css 樣式，當然你可會發現前 280（0-279）個是以數字為命名的 key，這些都不是，只有數字之后的才是我們可以使用的元素的 css 樣式。
那好，既然我們已經已經有這個大對象了，那我們只需要寫一個簡單的循環拋去 key 是數字的就可以知道瀏覽器到底支持多少種 css 樣式了。
var index = 1;
for(var i in getComputedStyle(myDiv)){
if(isNaN(Number(i))){
index++;
console.log(i)//可以看到所有的樣式
}};
console.log(index);//414
沒錯，谷歌瀏覽器對 div 元素的樣式支持一共是414種，各位同學么猜對了么？
最后說一下關于 getComputedStyle 的兼容性問題，在 Chrome 和 Firefox 是支持該屬性的，同時 IE 9、10、11 也是支持相同的特性的，IE 8并不支持這個特性。 IE 8 支持的是 element.currentStyle 這個屬性，這個屬性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,這點需要注意。
歡迎點擊進入李游Leo老師的前端課堂
點擊進入本站最全全棧課程《李游Leo - Web前端,從零基礎到全棧工程師》帶你用最快的時間一步月薪上萬
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
