getComputedStyle與currentStyle獲取樣式

Meathill 發布于2019-08-29 11:32 / 2690人閱讀

摘要：標準里有個全局方法，可以獲取到當前對象樣式信息，如，就能獲取到對象的左內邊距。特別注意一點如果要獲取當前對象的顏色信息，返回的是進制值，如，而其他瀏覽器返回的是值，如下面是一個簡單的小示例與獲取樣式兼容性均支持僅支持

CSS的樣式分為三類：

內嵌樣式：是寫在標簽里面的，內嵌樣式只對所在的標簽有效
內部樣式：是寫在HTML里面的，內部樣式只對所在的網頁有效
外部樣式表：如果很多網頁需要用到同樣的樣式，將樣式寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式的網頁里引用這個CSS文件

getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值，返回的是一個CSS樣式聲明對象，只讀
currentStyle是IE瀏覽器的一個屬性

基礎知識

眾所周知，用document.getElementById("element").style.xxx可以獲取element的xxx樣式信息，可是它獲取的只能是DOM元素內嵌樣式style屬性里的樣式規則，對于使用外部樣式表或內部樣式設置的元素，就獲取不到樣式信息了。
DOM標準里有個全局方法getComputedStyle，可以獲取到當前對象樣式信息，如：getComputedStyle(obj,null).paddingLeft，就能獲取到對象的左內邊距。但是IE不支持此方法，IE中獲取樣式的方法是currentStyle，不同于全局方法getComputedStyle，它是作為DOM元素屬性存在的，如：obj.currentStyle.paddingLeft，在IE中就獲取到對象的左內邊距了，兼容性的寫法如下：

return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;

getComputedStyle第二個參數表示的是:after、:before之類的偽類，如果不用偽類的話設置為null即可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二個參數“偽類”是必需的（如果不是偽類，設置為null），不過現在嘛，不是必需參數了
這樣，就能在IE及FF中返回對象的當前樣式信息了。
特別注意一點：如果要獲取當前對象的顏色信息，IE返回的是16進制值，如:#ffffff，而其他瀏覽器返回的是rgb值，如:rgb(255,255,255)
下面是一個簡單的小示例:




    
    getComputedStyle與currentStyle獲取樣式

兼容性

getComputedStyle:FireFox、Opera、Safari、Chrome均支持
currentStyle:僅IE支持

GPU云服務器云服務器獲取元素樣式 js獲取樣式 js獲取元素樣式獲取外鏈樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111714.html

getComputedStyle與currentStyle獲取樣式

摘要：標準里有個全局方法，可以獲取到當前對象樣式信息，如，就能獲取到對象的左內邊距。特別注意一點如果要獲取當前對象的顏色信息，返回的是進制值，如，而其他瀏覽器返回的是值，如下面是一個簡單的小示例與獲取樣式兼容性均支持僅支持 CSS的樣式分為三類：內嵌樣式：是寫在標簽里面的，內嵌樣式只對所在的標簽有效內部樣式：是寫在HTML里面的，內部樣式只對所在的網頁有效外部樣式表：如果很多網頁需要用到同...

junnplus 2019-08-21 14:46 評論0 收藏0
getComputedStyle與currentStyle獲取樣式

摘要：標準里有個全局方法，可以獲取到當前對象樣式信息，如，就能獲取到對象的左內邊距。特別注意一點如果要獲取當前對象的顏色信息，返回的是進制值，如，而其他瀏覽器返回的是值，如下面是一個簡單的小示例與獲取樣式兼容性均支持僅支持 CSS的樣式分為三類：內嵌樣式：是寫在標簽里面的，內嵌樣式只對所在的標簽有效內部樣式：是寫在HTML里面的，內部樣式只對所在的網頁有效外部樣式表：如果很多網頁需要用到同...

Hegel_Gu 2019-08-01 15:57 評論0 收藏0
我們來翻翻元素樣式的族譜-getComputedStyle

摘要：大家應該非常熟悉的方法那么如何在不引用的情況下同樣實現這個功能呢本文就介紹使用原生來獲取樣式的方法作者原文鏈接我們來翻翻元素樣式的族譜是什么方法可以獲取當前元素所有最終使用的屬性值返回的是一個樣式聲明對象只讀也就是說獲取到的不僅僅是我們自大家應該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實現這個功能呢?本文就介紹使用原生JS來獲取樣式的方法. 作者...

graf 2019-08-20 14:02 評論0 收藏0
我們來翻翻元素樣式的族譜-getComputedStyle

摘要：大家應該非常熟悉的方法那么如何在不引用的情況下同樣實現這個功能呢本文就介紹使用原生來獲取樣式的方法作者原文鏈接我們來翻翻元素樣式的族譜是什么方法可以獲取當前元素所有最終使用的屬性值返回的是一個樣式聲明對象只讀也就是說獲取到的不僅僅是我們自大家應該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實現這個功能呢?本文就介紹使用原生JS來獲取樣式的方法. 作者...

shengguo 2019-08-30 15:52 評論0 收藏0
我們來翻翻元素樣式的族譜-getComputedStyle

摘要：大家應該非常熟悉的方法那么如何在不引用的情況下同樣實現這個功能呢本文就介紹使用原生來獲取樣式的方法作者原文鏈接我們來翻翻元素樣式的族譜是什么方法可以獲取當前元素所有最終使用的屬性值返回的是一個樣式聲明對象只讀也就是說獲取到的不僅僅是我們自大家應該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實現這個功能呢?本文就介紹使用原生JS來獲取樣式的方法. 作者...

My_Oh_My 2019-08-01 16:15 評論0 收藏0