Get the getComputedStyle method of element CSS value familiar

First, broken read ~ Preface

We've all used the jquery CSS() approach, and the bottom-up operation is using getComputedStyle and GetPropertyValue methods.

For those who just want to eat a meal, CSS() it is enough to know how to use it. For the hope that in the JS road farther on the bearer said, a simple understanding of some JS library bottom-level implementation of their own learning is very helpful. It may not be handy to use, at least to create some innovative new technology to broaden the thinking.

One of the reasons why jquery is popular is that the method name is relatively short. Like a fight, a large subconscious mind, can not help but fear, wide berth, small (or village women, children), naturally thought is soft tofu, willing to accept as an opponent.

So, when we see the getComputedStyle name of a method like this long, the lazy man in our body suddenly woke up: Ouch yo, this thing, and rest assured that food, just a few years to see one back. It looks complicated, and I want to talk with my sister at night. This thing, let it from the side of the bar, anyway, will not drop a piece of meat.

It's not such a joke on the Internet: It's scary that people smarter than you are more diligent than you are. So, where is the difference in "diligence"? Take this getComputedStyle example: Lazy youth is to look at, immediately like to see Sister Feng as the sight of leaving; the ordinary youth is to look at, found that they do not understand, foridom or valley, familiar with understanding; diligent youth is not only understand, but also take time to practice (such as a simple demo test), familiar with the specificity of the method, Verify some of the ideas are correct.

You can follow your current mental state to see what kind of youth you are: If at this time, you are not interested in the content of this article (of course, your work and JS relationship close), you are ... If you read the contents of this article, found, still have a lot of harvest, heart aftertaste, and then ctrl+w go to other places foraging, no longer come back, that you are ordinary youth; If you read this article and then make additional tests on what you said, such as whether the IE9 browser supports testing, And in the form of comments to point out possible errors, you have to say that you are diligent youth, in time, there will be a technology. Judging from some of my comments, there are a lot of peers who are such diligent people.

, long time did not write articles, words and more, stop, into the topic.

Second, getComputedStyle is?

getComputedStyleis 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 required parameters.

Three, the difference between getComputedStyle and style

We use element.style CSS styles that can also get elements to declare objects, but there getComputedStyle are some differences with methods.

1. Read-Only and writable
   As mentioned above, the getComputedStyle method is read-only, can only get the style, cannot be set, and element.style can read and write, flexible.
2. Gets the range of objects
   getComputedStylemethod gets all the 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 only the style CSS style in the element attribute can be obtained. So for a bare element <p> , the getComputedStyle method returns the length attribute value (if any) in the object (as far as 190+ I test ff:192, ie9:195, chrome:253, different environmental results may vary), and element.style that is 0.

Iv. getComputedStyle and DefaultView

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

In fact, the use defaultView is basically not necessary, getComputedStyle itself exists window within the object. According to Dennishall, the use 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 ~ ~).

However, there is a special case, the way to not use the method on the FireFox3.6 defaultView , is to access the framework (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 Mobile
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

currentStyleis a property of the Internet Explorer, which is similar to what can be said to be a close element.style relative, at least in the form of use, element.currentStyle the difference is that element.currentStyle the element is returning the final CSS attribute value of the current application (including the outer chain CSS file, the embedded property in the page, <style> etc.).

Therefore, from the function, the getComputedStyle method and currentStyle properties go very close, form style and currentStyle walk near. However, the currentStyle attribute does not seem to support pseudo-class-style fetching, which is different from the method, and it is a getComputedStyle point that css() the jquery 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

The results are shown 24px in Firefox (calculated), and in IE it is the value of the 2em property in CSS:

getComputedStyleThere are currentStyle many other specific differences between methods and properties, I use a normal button to do elements, traverse the property name and property values, you can 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 styleFloat :

And the IE9 browser is the cssFloat and styleFloat both.

And so on other n many differences.

Vii. Methods of GetPropertyValue

getPropertyValuemethod to 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 if the use of key value access, it can not be used directly getComputedStyle(element, null).float , but should be cssFloat with styleFloat , naturally need browser judge, compare toss!

getPropertyValuethe use of the method does not have to be camel writing form (not support hump notation), such as: style.getPropertyValue("border-top-left-radius") ;

Compatibility
getPropertyValuemethod 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 newest), the getAttribute method provides a getPropertyValue similar function to the method that can access the properties of the CSS style object. Usage is getPropertyValue similar to:

Style.getattribute ("float");

Note No, the use getAttribute of the method also does not need to be cssFloat with styleFloat the 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 IE9 browsers, although it is applied currentStyle , the currentStyle returned objects are fully supported by the results getPropertyValue .

Ix. GetPropertyValue and Getpropertycssvalue

It looks getPropertyCSSValue getPropertyValue like a close relative, but in fact, it getPropertyCSSValue 's much more mischievous.

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

getPropertyCSSValueMethod compatibility is not good, IE9 browser is not supported, Opera browser is not supported (actual support, just always throw an exception). And, although in Firefox, the style object supports getPropertyCSSValue methods, but always returns null . So at present, the getPropertyCSSValue method can be ignored first.

Ten, add ~ conclusion

With a good library like jquery, do we have the necessary knowledge of the underlying getComputedStyle approach?

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

Next article, I will introduce how to implement the getComputedStyle method on pseudo-class elements of the supernatural, to achieve CSS3 media queries under 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