溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

瀏覽器中的元素到底支持多少種CSS樣式

發(fā)布時(shí)間：2020-09-06 11:10:40 來(lái)源：網(wǎng)絡(luò) 閱讀：182 作者：李游LEO 欄目：web開(kāi)發(fā)

樣式這個(gè)東西我想大家都不陌生，沒(méi)有樣式整個(gè)頁(yè)面一下也就失去的光彩，所以樣式（style）的重要性就不言而喻了。

那么一個(gè)元素到底支持多少個(gè)樣式呢？可能有人會(huì)說(shuō)這事得 W3C 說(shuō)的算。

其實(shí)，這事 W3C 說(shuō)的也不算，為什么呢？因?yàn)?W3C 就算上面有，但是瀏覽器中如果沒(méi)有的話，那一切都沒(méi)有意義，因?yàn)闉g覽器不支持，W3C 把這個(gè)樣式說(shuō)的再好再棒也沒(méi)有用。

好，那既然檢測(cè)元素樣式的唯一標(biāo)準(zhǔn)是瀏覽器的話，那么問(wèn)題來(lái)了。對(duì)于一個(gè)最簡(jiǎn)單的 div 元素瀏覽器到底支持它多少種樣式呢？

當(dāng)然這里我們要說(shuō)到一個(gè)比較常用獲取元素樣式的方法：getComputedStyle

咱們先簡(jiǎn)單說(shuō)說(shuō) getComputedStyle 的用法，看名字就知道它跟樣式有關(guān)，如果按照英文翻譯的話就是：

get 獲取
Computed 計(jì)算
Style 樣式

也就是說(shuō)，這個(gè)方法可以幫助咱們獲取一個(gè)元素在實(shí)際最后需要計(jì)算的樣式數(shù)值。

最簡(jiǎn)單的使用方法就是，首先是有兩個(gè)參數(shù)，元素和偽類。第二個(gè)參數(shù)不是必須的，當(dāng)不查詢偽類元素的時(shí)候可以忽略或者傳入 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的區(qū)別。

element.style 讀取的只是元素的“內(nèi)聯(lián)樣式”，即 寫在元素的 style 屬性上的樣式；而 getComputedStyle 讀取的樣式是最終樣式，包括了“內(nèi)聯(lián)樣式”、“嵌入樣式”和“外部樣式”。

但是，element.style 既支持讀也支持寫，而 getComputedStyle 僅支持讀并不支持寫入。

當(dāng)然有的同學(xué)看到這就會(huì)問(wèn)，老師，那它和元素瀏覽器到底支持它多少種樣式有什么關(guān)系呢？

答案是：有，而且是相當(dāng)有。

細(xì)心的同學(xué)可能已經(jīng)看出來(lái)了，它的使用方法是后面使用了一個(gè)中括號(hào)然后放入了樣式就會(huì)返回出最后元素的計(jì)算的樣式數(shù)值。有沒(méi)有發(fā)現(xiàn)它和 JavaScript 中的一個(gè)數(shù)據(jù)類型的使用方法很像呢？

沒(méi)錯(cuò)，就是 JSON。

你會(huì)發(fā)現(xiàn) JSON 也是支持后面放入中括號(hào)然后放入字符串，如果有該屬性就會(huì)返回該屬性的value。也就是所謂的鍵值對(duì)(“key = value”)。所以也就是說(shuō)如果不加上后面的中括號(hào)本身直接使用 getComputedStyle 會(huì)把這個(gè)對(duì)象返回出來(lái)，而這個(gè)大對(duì)象中包含了所有的樣式，只不過(guò)我們平時(shí)用的時(shí)候只是在后面加上了 key 把 value 取到而已。

咱們以 Chrome 瀏覽器為例，當(dāng)然各位同學(xué)可以嘗試一下：

console.log(getComputedStyle(myDiv));//

你會(huì)發(fā)現(xiàn)好長(zhǎng)好長(zhǎng)的，而且沒(méi)顯示完的一個(gè)巨大的對(duì)象，大家也可以點(diǎn)開(kāi)這個(gè)對(duì)象，這個(gè)對(duì)象中包含了這個(gè)元素可以使用的所有的 css 樣式，當(dāng)然你可會(huì)發(fā)現(xiàn)前 280（0-279）個(gè)是以數(shù)字為命名的 key，這些都不是，只有數(shù)字之后的才是我們可以使用的元素的 css 樣式。

那好，既然我們已經(jīng)已經(jīng)有這個(gè)大對(duì)象了，那我們只需要寫一個(gè)簡(jiǎn)單的循環(huán)拋去 key 是數(shù)字的就可以知道瀏覽器到底支持多少種 css 樣式了。

var index = 1;
for(var i in getComputedStyle(myDiv)){
if(isNaN(Number(i))){
index++;
console.log(i)//可以看到所有的樣式
}

};
console.log(index);//414

沒(méi)錯(cuò)，谷歌瀏覽器對(duì) div 元素的樣式支持一共是414種，各位同學(xué)么猜對(duì)了么？

最后說(shuō)一下關(guān)于 getComputedStyle 的兼容性問(wèn)題，在 Chrome 和 Firefox 是支持該屬性的，同時(shí) IE 9、10、11 也是支持相同的特性的，IE 8并不支持這個(gè)特性。 IE 8 支持的是 element.currentStyle 這個(gè)屬性，這個(gè)屬性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,這點(diǎn)需要注意。

歡迎點(diǎn)擊進(jìn)入李游Leo老師的前端課堂
點(diǎn)擊進(jìn)入本站最全全棧課程《李游Leo - Web前端,從零基礎(chǔ)到全棧工程師》帶你用最快的時(shí)間一步月薪上萬(wàn)

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手