Code _javascript tips for JavaScript to read CSS information for elements

such as cascading a set of style information for an HTML element, where the width property has a value of 80px. Then the call script reads this value and the result is always an empty string, and I actually want to get "80px". In this case, David Flanagan the solution in the JavaScript Authority Guide (fifth edition).

The following is a translation
Script-computed style
for javascript:the definitive Guide, 5th Edition Chapter16 Section4
The style property of an HTML element is equivalent to the style HTML attribute, and as a value of the Style property, the CSS2 Property object is inline style information only for such an element. This does not include any other styles within the CSS cascading. Sometimes you really want to know exactly how to give an element a style setting, while ignoring the styles that fall in the cascading. All you want to do is calculate the style for the element. Unfortunately the name of the computed style is ambiguous; it is related to the calculation performed before the browser displays the element: All styles are tried to apply to the element, and all applicable styles are merged into any inline style of the element. This aggregated style information can be used to correctly represent elements in the browser window. In the standard of the consortium, the API used to determine how the elements are evaluated is the getComputedStyle () method of the Window object. The first parameter of this method is the element that expects the style to be evaluated. The second parameter is any desired CSS pseudo object, such as ": Before" or ": after". You may not be interested in pseudo objects, but in Mozilla and Firefox, the second parameter cannot be ignored for the implementation of this method. Otherwise, because of its second argument, you will always find that getComputedStyle () throws null. The return value of the getComputedStyle () is a CSS2 Property object that represents the style of all load-determined elements or pseudo objects. Unlike the CSS2 Property object, which can control inline style information, the object returned by getComputedStyle () is read-only. IE does not support the getComputedStyle () method, but provides a simpler alternative. Each HTML element has a Currentstyle property that controls the style it evaluates. The only drawback of IE's API is that it does not provide a way to query pseudo object styles. As an example of a calculated style, you can use the following Cross-platform code to confirm that the element is represented by the font:

Copy Code code as follows:

var p = document.getelementsbytagname ("P") [0]; Get paragraph of Doc
var typeface = ""; We want its typeface
if (P.currentstyle)//Try simple IE API
typeface = p.currentstyle.fontfamily;
else if (window.getcomputedstyle)//otherwise use API
typeface = window.getComputedStyle (P, null). fontFamily;

The calculation style is quick, and it doesn't always provide the information you want. Consider the example of just the font. The Font-family property accepts a comma-delimited list of the desired font types that are easily provided across platforms. When you query the computed fontfamily attribute, you can easily get the value of the font-family style that is defined on the element. This may return a value similar to "Arial,helvetica,sans-serif", but does not tell you exactly which font is actually being used. Similarly, if an element is not absolutely positioned and attempts to query its position and size by the top and left properties of the computed style, the result always returns "Auto". This is a completely legitimate CSS value, but it's not what you want.