我們來翻翻元素樣式的族譜-getComputedStyle

graf 發布于2019-08-20 14:02 / 2263人閱讀

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

大家應該非常熟悉jQuery的css()方法,那么如何在不引用jQuery的情況下同樣實現這個功能呢?本文就介紹使用原生JS來獲取樣式的方法.

作者：Icarus
原文鏈接：我們來翻翻元素樣式的族譜-getComputedStyle

getComputedStyle是什么

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

Window.getComputedStyle()方法可以獲取當前元素所有最終使用的CSS屬性值.返回的是一個CSS樣式聲明對象(object CSSStyleDeclaration),只讀.也就是說,獲取到的不僅僅是我們自定義的樣式,它包含了所有作用在當前元素上的css屬性及屬性值.

語法

var style = window.getComputedStyle(element[, pseudoElt]);

其中element是必需的參數,代表獲取樣式的元素.pseudoElt是偽類參數,在Gecko2.0之前是必填項,但在現代瀏覽已經不是了,如果不是偽類的話,設置為null即可.

var style = window.getComputedStyle(element, null);

舉個栗子 不包含偽類

假設頁面上存在一個id為id的元素,使用getComputedStyle方法獲取到的元素樣式如下所示:

包含偽類



generated content

兼容性

其中問號部分代表暫無測試,是否兼容暫不確定.

由上圖可知,getComputedStyle的兼容性很不錯,基本支持所有的現代瀏覽器.當然IE瀏覽器自有他的脾氣,在IE9以下有另一套功能相似的API,暫且不提.

獲取特定屬性值

在上面的栗子中,我們可以看到getComputedStyle返回的是樣式聲明對象,包含了元素所有的樣式值,那么我們如何獲取到想要的屬性值呢?有兩種方法可以實現這一需求:

window.getPropertyValue()

鍵值訪問

getPropertyValue

getPropertyValue方法可以直接獲取CSS樣式申明對象上的屬性值,例如:

window.getComputedStyle(element, null).getPropertyValue("屬性名");

可以非常方便的獲取到我們想要的屬性值.需要注意:不支持駝峰命名,屬性名按照css的寫法,如background-color:

window.getComputedStyle(element, null).getPropertyValue("background-color");

兼容性

除IE9以下瀏覽器,其余現代瀏覽器均支持.

鍵值訪問

通過鍵值訪問來獲取css屬性較為繁瑣,可能需要進行額外的瀏覽器檢測,例如

window.getComputedStyle(element, null).float //錯誤!

這種寫法是錯誤的,原因是float是js的一個保留字,不能直接使用.IE下對應的是 styleFloat,firefox,chorme,safari下對應的則是cssFloat.相較而言更建議使用getPropertyValue來獲取具體屬性值.

IE9以下的替代方法 getComputedStyle和currentStyle

currentStyle是IE瀏覽器特有的的一個屬性,element.currentStyle返回的同樣是所有元素當前應用的最終CSS屬性值.但是其中獲取到的屬性名會存在差異,如上提及的styleFloat和cssFloat.

不過,currentStyle屬性不支持偽類樣式獲取,這是與getComputedStyle方法的重要差異,也是jQuery中css()方法無法獲取偽類元素屬性的原因.

假設頁面上有一個id為test的元素,示例如下:

var style = document.getElementById("test").currentStyle;

getPropertyValue和getAttribute

在IE瀏覽器中的getAttribute方法提供了與getPropertyValue方法類似的功能,配合currentStyle使用,可以訪問CSS樣式對象的屬性,用法與getPropertyValue類似:

element.currentStyle.getAttribute("float");

可以注意到,使用getAttribute同樣不需要進行瀏覽器檢測.但是有一點需要注意:在IE7+的瀏覽器中,getAttribute獲取屬性名可以使用駝峰式命名法,IE6必須使用駝峰式命名方法,如:

// IE7,8兩者均可,IE6必須使用駝峰命名法
element.currentStyle.getAttribute("background-color");
element.currentStyle.getAttribute("backgroundColor");

getComputedStyle和style的區別

我們使用element.style也可以獲取元素的CSS樣式聲明對象,但是其與getComputedStyle方法存在一些差異.

只讀與可寫

上面提到過getComputedStyle方法是只讀的,只能獲取樣式,不能設置;而element.style能讀能寫,八面玲瓏.

獲取的對象范圍

getComputedStyle方法獲取的是最終應用在元素上的所有CSS屬性對象,即使沒有編寫任何樣式代碼,也會獲取默認的所有樣式的屬性和屬性值;element.style只能獲取元素style屬性中的CSS樣式.
可能這樣說不太好理解,我們回顧一下CSS樣式表的表現形式:

內聯樣式 (inline Style): 是寫在HTML標簽的style屬性里面的,內嵌樣式只對該標簽有效.

內部樣式 (internal Style Sheet): 是寫在HTML文檔的style標簽里面的,內部樣式只對當前頁面有效.

外部樣式表 (External Style Sheet): 如果很多網頁需要用到同樣的樣式,將樣式寫在一個以.CSS為后綴的CSS文件里,然后在每個需要用到這些樣式的網頁里引用這個CSS文件.也就是說,getComputedStyle獲取到的是所有最終在元素上應用的樣式屬性,而element.style僅僅獲取的是我們人為編寫的樣式.
我們來做一個測試,對于一個光禿禿的沒有任何樣式設置的元素p,getComputedStyle方法返回對象中length屬性值和element.style的區別.



var elem = document.querySelector("p");
// 0
elem.style.length
// 261 - chrome 55.0.2883.87
// 249 - firefox 50.0
// 233 - safari 5.1.1
window.getComputedStyle(elem, null).length

很容易看出兩者的區別.

getComputedStyle與defaultView

From mdn

In many code samples online, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It"s likely the defaultView pattern was some combination of (1) folks not wanting to write a spec for window and (2) making an API that was also usable in Java. However, there is a single case where the defaultView"s method must be used: when using Firefox 3.6 to access framed styles.

window.getComputedStyle還有另一種寫法,就是 document.defaultView.getComputedStyle.
實際上,使用defaultView基本上是沒有必要的,getComputedStyle本身就存在window對象之中.使用defaultView可能一是人們不太樂意在window上專門寫個東西,二是讓API在Java中也可用.
不過有個特殊情況,在FireFox3.6上不使用defaultView方法就搞不定的,就是訪問框架(frame)的樣式.不過FireFox3.6已經退出歷史舞臺,不用過于在意.

小結

element.style
可讀可寫,但只能獲取到自定義style屬性

window.getComputedStyle/document.defaultView.getComputedStyle
只讀,非IE瀏覽器及IE9+獲取所有作用樣式,使用getPropertyValue來獲取特定屬性.

currentStyle
只讀,IE6-8獲取所有作用樣式,使用getAttribute來獲取特定屬性.

這篇博客主要介紹了getComputedStyle的前世今生,真正要實現jQuery中兼容IE及其它現代瀏覽器的css()方法還需要額外做一些兼容性的處理.限于篇幅,欲知后事如何,且聽下回分解.

參考資料

Window.getComputedStyle()-MDN

原生JS getComputedStyle等方法解析

獲取元素CSS值之getComputedStyle方法熟悉

云服務器 GPU云服務器元素的樣式我們可以用vps來干什么獲取元素樣式 html 元素樣式

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

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

我們來翻翻元素樣式的族譜-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
面試集 - 收藏集 - 掘金

摘要：計算數組的極值微信面試題獲取元素的最終前端掘金一題目用代碼求出頁面上一個元素的最終的，不考慮瀏覽器，不考慮元素情況。 Excuse me？這個前端面試在搞事！ - 前端 - 掘金金三銀四搞事季，前端這個近年的熱門領域，搞事氣氛特別強烈，我朋友小偉最近就在瘋狂面試，遇到了許多有趣的面試官，有趣的面試題，我來幫這個搞事 boy 轉述一下。以下是我一個朋友的故事，真的不是我。 ... ja...

crossea 2019-08-20 16:39 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
getComputedStyle方法的那些事

摘要：返回的是一個樣式聲明對象，只讀。方法返回一個最初值對象或值列表對象，這取決于屬性值的類型。而且，雖然中，對象支持方法，但總是返回因此，目前來講，方法可以先不聞不問。本文轉載之張鑫旭的博客一、getComputedStyle是？getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式聲明對象([object CSSStyleDeclara...

Baoyuan 2019-08-29 15:31 評論0 收藏0