Get the getComputedStyle method of element CSS value familiar

First, continue to reprint
Second, getComputedStyle is?

getComputedStyle is a CSS property value that can get all the final use of the current element. Returns a CSS style declaration object ([object Cssstyledeclaration]), read-only.

getComputedStyle () gives the final used values of all the CSS properties of an element.

The syntax is as follows:

var style = window.getComputedStyle ("element", "Pseudo-class");

For example:

var dom = document.getElementById ("Test"),    style = window.getComputedStyle (DOM, ": after");

Two parameters, we all understand Chinese, there is nothing to say. Just the extra hint: Gecko 2.0 (Firefox 4/thunderbird 3.3/seamonkey 2.1) before the second parameter "pseudo-class" is required (if not pseudo-class, set to null), but now, not the required parameters.

Three, the difference between getComputedStyle and style

We can also get the CSS style declaration object of the element using Element.style, but there are some differences with the getComputedStyle method.

1. read-only and writable
   As mentioned above, the getComputedStyle method is read-only, can only get the style, cannot be set, while Element.style can read and write, flexible.
2. gets the range of objects
   The getComputedStyle method obtains all CSS property objects that are eventually applied to the element (even if there is no CSS code, it will show the default ancestor eight generations), and Element.style can only get the CSS style in the element's style property. So for a bare element <p>,getcomputedstyle method returns the value of the length attribute in the object (if any) is 190+ (according to my test ff:192, ie9:195, chrome:253, different environmental results may vary), and Element.style is 0.

Iv. getComputedStyle and DefaultView

If we look at the jquery source code, we will find that its CSS () method implementation is not used window.getComputedStyle but Document.defaultView.getComputedStyle, yo? What's the matter?

In fact, the use of DefaultView is essentially unnecessary, and the getComputedStyle itself exists within the Window object. According to Dennishall, the use of DefaultView may be that people are not very happy to write something in window, and the other is to make the API available in Java (which I do not understand, forget pointing ~ ~).

There is a special case, however, that the use of the DefaultView method on FireFox3.6 is a way of accessing the frame style.

Five, getComputedStyle compatibility

For desktop devices:

	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support			9
Pseudo-Class element support

For mobile devices:

	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobi Le
Basic support			WP7 Mango
Pseudo element support	?	?		?	?

The above mark indicates that there is no test and is compatible with the unknown. If you are convenient to test, you are welcome to inform the test results, here will be updated in time, and attach your name, to thank you for your contribution.

We first focus on the desktop device, you can see, getComputedStyle method Ie6~8 is not supported, have, back a half-day daughter-in-law, found that the Monkey King changed-depressed. No hurry, IE has its own set of things.

Vi. getComputedStyle and Currentstyle

Currentstyle is an attribute of the IE browser to entertain itself, And Element.style can be said to be close relatives, at least in the form of use, Element.currentstyle, the difference is that Element.currentstyle returns the final CSS attribute value of the element's current application (including the outer-chain CSS file, embedded in the page <style> properties, etc.).

Therefore, from the function, the getComputedStyle method and the Currentstyle attribute go very close, formal style and Currentstyle walk near. However, the Currentstyle attribute does not seem to support pseudo-class-style fetching, which is the difference from the getComputedStyle method and a point that the Jquerycss () method cannot embody.

//zxx: If you only know the jquery css () method, you won't know that pseudo-class styles are also available, although some browsers do not support them.

For example, we want to get the height of an element, which can resemble the following code:

Alert (Element.currentstyle element.currentStyle:window.getComputedStyle (element, null)). height);

You can click here: Use getComputedStyle and currentstyle to get the element height demo

As a result, Firefox displays 24px (calculated), while IE is the 2EM attribute value in CSS:

There are many other specific differences between the getComputedStyle method and the Currentstyle property, and I do the element with a normal button, traversing the attribute name and attribute value, You can really click here: getComputedStyle and Currentstyle Properties show demo

Looking closely, we can see a lot of differences, such as the floating property, which is under the Firefox browser (cssfloat):

The IE7 browser is the stylefloat:

The IE9 browser is the Cssfloat and stylefloat.

And so on other n many differences.

Vii. Methods of GetPropertyValue

The GetPropertyValue method can get the property values (direct property names) on the CSS style Declaration object, for example:

window.getComputedStyle (element, null). GetPropertyValue ("float");

If we do not use the GetPropertyValue method, the direct use of key-value access, in fact, is also possible. However, for example, float here, if you use a key value access, you cannot use getComputedStyle (element, NULL) directly. float, but should be cssfloat and stylefloat, naturally need browser judge, compare toss!

The use of the GetPropertyValue method does not have to be camel-written (not supported by hump notation), such as Style.getpropertyvalue ("Border-top-left-radius");

compatibility
GetPropertyValue method ie9+ and other modern browsers are supported, see the following table:

	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support			9

OK, a related compatibility issues (ie6-8 swollen do), feel the head began to ache slightly ~ ~, not urgent, ie free set of their own routines, is the GetAttribute method.

Viii. GetPropertyValue and GetAttribute

In the old IE browser (including the latest), the GetAttribute method provides features similar to the GetPropertyValue method that can access the properties of CSS style objects. Usage is similar to GetPropertyValue:

Style.getattribute ("float");

Note that the use of the GetAttribute method also does not require cssfloat and Stylefloat's weird writing and compatibility processing. However, there is a little difference, that is, the property name needs hump writing, as follows:

Style.getattribute ("BackgroundColor");

If you do not consider IE6 browser, it seems to be able to write:

Style.getattribute ("Background-color");

Example is king, you can click here: GetPropertyValue and getattribute get background color demo

Results The RGB color returned under Firefox as always (Chrome also returns RGB color):

For the IE9 browser, although the application is currentstyle, but from the result, Currentstyle returns the object is fully support GetPropertyValue method.

Ix. GetPropertyValue and Getpropertycssvalue

From the looks of Getpropertycssvalue and GetPropertyValue are close relatives, but in fact, getpropertycssvalue to be more unruly.

The Getpropertycssvalue method returns a CSS original value (Cssprimitivevalue) object (width, height, left, ...) or a CSS value list (cssvaluelist) object (BackgroundColor, FontSize, ...), depending on the type of the Style property value. Under some special style properties, it returns a custom object. The custom object inherits from the Cssvalue object (that is, the getComputedStyle and the Currentstyle return object).

Getpropertycssvalue method compatibility is not good, IE9 browser is not supported, Opera browser is not supported (actual support, just always throw an exception). Moreover, although the style object in Firefox supports the Getpropertycssvalue method, it always returns NULL. Therefore, at present, the Getpropertycssvalue method can be ignored first.

Ten, add ~ conclusion

With good libraries like jquery, do we have the need to be familiar with the underlying getcomputedstyle approach?

In fact, this article has not been in depth to expand the getComputedStyle method a very important, similar to the CSS () method does not have a function--to get the pseudo-class element style. But from this point on, it is necessary to familiarize yourself with the getComputedStyle method.

Next article, I will introduce how to implement the getComputedStyle method on pseudo-class elements of supernatural powers, implementation of CSS3 media queries some JS interaction, and practical application.

Well, it's been a while since the beginning, and there's no more nonsense about it. In a hurry, the text is unavoidable to express inaccuracies, welcome correction. Welcome to add, thank you for reading, hope that the content of this article can be helpful to your study.

Get the getComputedStyle method of element CSS value familiar