In front-end development, JavaScript and CSS information are always involved. For example, a set of style information is cascading for an HTML element. The value of the width attribute is 80 PX. Then, call the script to read this value. The result is always an empty string. In fact, I want to get "80px ". To address this problem, David Flanagan provides a solution in the JavaScript authoritative guide (fifth edition.
The following is a translation of JavaScript: The Definitive Guide, 5th Edition Chapter16 Section4
Script calculation Style
The style attribute of an HTML element is equivalent to the style HTML attribute. As the value of the style attribute, the CSS2 attribute object is only such an inline style information of an element. This does not include any other style in CSS cascade. Sometimes you really want to know the exact style settings assigned to an element, while ignoring the style that falls into the cascade. What you want to do is to calculate the style for the element. Unfortunately, the name of the calculated style is vague; it is related to the computation performed before the browser displays the element: All styles are tried to apply to elements, and all applicable styles are merged into any embedded styles of the element. This aggregated style information can be used to correctly display elements in the browser window. In W3C standards, the API used to determine the calculation style of elements is the getComputedStyle () method of the window object. The first parameter of this method is the element of the expected calculated style. The second parameter is any expected CSS pseudo object, such as ": before" or ": after ". You may not be interested in pseudo objects, but in Mozilla and Firefox's implementation of this method, the second parameter cannot be ignored. Otherwise, because of its second parameter, you will always find that getComputedStyle () triggers null. The return value of getComputedStyle () is a CSS2 attribute object that represents all the styles loaded with the determined elements or pseudo objects. Unlike CSS2 property objects that can control embedded style information, getComputedStyle () returns read-only objects. IE does not support the getComputedStyle () method, but provides a simpler alternative. Each HTML element has a currentStyle attribute to control its calculated style. The only drawback of IE's API is that it cannot provide a way to query pseudo object styles. As an example of the calculated style, you can use the following cross-platform code to confirm the font of the element:
The Code is as follows:
Var p = document. getElementsByTagName ("p") [0]; // Get first paragraph of doc
Var typeface = ""; // We want its typeface
If (p. currentStyle) // Try simple ie api first
Typeface = p. currentStyle. fontFamily;
Else if (window. getComputedStyle) // Otherwise use W3C API
Typeface = window. getComputedStyle (p, null). fontFamily;
The computation style is fast, and it does not always provide the information you want. Consider the font example. The font-family property accepts a comma-separated list to easily provide the expected font type for cross-platform platforms. When you query the calculated fontFamily attribute, you can easily obtain the fixed font-family style value added to the element. This may return a value similar to "arial, helvetica, sans-serif", but does not tell you which font is actually in use. Similarly, if an element is not absolutely located and an attempt is made to query its position and size through the top and left attributes of the calculated style, the result will always return "auto ". This is a completely legal CSS value, but it is not what you want.
