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

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

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

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

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

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

當然這里我們要說到一個比較常用獲取元素樣式的方法：getComputedStyle

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

get 獲取
Computed 計算
Style 樣式

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

最簡單的使用方法就是，首先是有兩個參數(shù)，元素和偽類。第二個參數(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 僅支持讀并不支持寫入。

當然有的同學看到這就會問，老師，那它和元素瀏覽器到底支持它多少種樣式有什么關系呢？

答案是：有，而且是相當有。

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

沒錯，就是 JSON。

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

咱們以 Chrome 瀏覽器為例，當然各位同學可以嘗試一下：

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

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

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

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

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

歡迎點擊進入李游Leo老師的前端課堂
點擊進入本站最全全棧課程《李游Leo - Web前端,從零基礎到全棧工程師》帶你用最快的時間一步月薪上萬

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

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

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

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

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

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

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