瀏覽器中的元素到底支持多少種CSS樣式-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)建站-成都網(wǎng)站建設(shè)公司，專注網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、網(wǎng)站營銷推廣，域名與空間，網(wǎng)絡(luò)空間，成都網(wǎng)站托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，請聯(lián)系創(chuàng)新互聯(lián)建站。

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

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

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

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

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

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

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

最簡單的使用方法就是，首先是有兩個(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ì)問，老師，那它和元素瀏覽器到底支持它多少種樣式有什么關(guān)系呢？

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

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

沒錯(cuò)，就是 JSON。

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

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

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

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

那好，既然我們已經(jīng)已經(jīng)有這個(gè)大對象了，那我們只需要寫一個(gè)簡單的循環(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

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

最后說一下關(guān)于 getComputedStyle 的兼容性問題，在 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ù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：瀏覽器中的元素到底支持多少種CSS樣式-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article44/eheee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、微信公眾號、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、用戶體驗(yàn)、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

瀏覽器中的元素到底支持多少種CSS樣式-創(chuàng)新互聯(lián)