JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

16.4 Querying Computed Styles

This specifies that any time the opacity of a “fadeable” element changed, that change will be animated (from the current value to the new value) over a period of half a second, using a nonlinear easing function. CSS Transitions is not yet standard but has been implemented for some time in Safari and Chrome using the -webkit-transition property. At the time of this writing, Firefox 4 has added support using -moz-transition.

16.4 Querying Computed Styles

The style property of an element is that element’s inline style. It overrides all style-sheets, and it is the perfect place to set CSS properties to change the visual appearance of an element. It is not, however, generally useful for querying the styles that actually apply to an element. For that, you want the computed style. The computed style for an element is the set of property values that the browser derives (or computes) from the

16.4 Querying Computed Styles | 435

inline style plus all applicable style rules in all linked stylesheets: it is the set of properties actually used to display the element. Like inline styles, computed styles are represented with a CSSStyleDeclaration object. Unlike inline styles, however, computed styles are read-only. You can’t set these styles, but the computed CSSStyleDeclaration object for an element lets you determine exactly what style property values the browser used when rendering that element.

Obtain the computed style for an element with the getComputedStyle() method of the Window object. The first argument to this method is the element whose computed style is desired. The second argument is required and is usually nullor the empty string, but it can also be a string that names a CSS pseudoelement, such as “:before”, “:after”, “:first-line”, or “:first-letter”:

var title = document.getElementById("section1title");

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

The return value of getComputedStyle() is a CSSStyleDeclaration object that represents all the styles that apply to the specified element (or pseudoelement). There are a number of important differences between a CSSStyleDeclaration object that represents inline styles and one that represents computed styles:

Computed styles and inline styles can be used together. Example 16-4 defines functions scale()and scaleColor(). One queries and parses the computed text size of a specified element; the other queries and parses the computed background color of an element. Both functions then scale the resulting value and set the scaled value as an inline style of the element. (These functions do not work in IE8 and earlier: as we’ll discuss below, those versions of IE do not support getComputedStyle().)

Example 16-4. Querying computed styles and setting inline styles

// Scale the text size of element e by the specified factor

function scale(e, factor) {

// Use the computed style to query the current size of the text

var size = parseInt(window.getComputedStyle(e,"").fontSize);

// And use the inline style to enlarge that size = factor*size + "px"; }

// Alter the background color of element e by the specified amount. // Factors > 1 lighten the color and factors < 1 darken it. function scaleColor(e, factor) {

var color = window.getComputedStyle(e, "").backgroundColor; // Query

var components = color.match(/[\d\.]+/g); // Parse r,g,b, and a components

for(var i = 0; i < 3; i++) { // Loop through r, g and b

var x = Number(components[i]) * factor; // Scale each one

x = Math.round(Math.min(Math.max(x, 0), 255)); // Round and set bounds

components[i] = String(x);

} if (components.length == 3) // A rgb() color = "rgb(" + components.join() + ")"; else // A rgba() color = "rgba(" + components.join() + ")"; }

Computed styles can be tricky, and querying them does not always provide the information you might expect. Consider the font-family property: it accepts a comma-separated list of desired font families for cross-platform portability. When you query the fontFamilyproperty of a computed style, you’re simply getting the value of the most specific font-family style that applies to the element. This may return a value such as “arial,helvetica,sans-serif”, which does not tell you which typeface is actually in use. Similarly, if an element is not absolutely positioned, attempting to query its position and size through the top and left properties of its computed style often returns the value “auto”. This is a perfectly legal CSS value, but it is probably not what you were looking for.

getComputedStyle() is not implemented by IE8 and earlier, but it is expected in IE9. In IE, every HTML element has a currentStyle property whose value is a CSSStyleDeclaration. IE’s currentStyle combines inline styles with stylesheets, but it is not a true computed style because relative values are not converted to absolute values. Querying the properties of IE’s current style can return sizes with relative units like “%” or “em” or colors with imprecise names like “red”.

Although CSS can be used to precisely specify the position and size of document elements, querying the computed style of an element is not the preferred way to determine the element’s size and position. See §15.8.2 for a simpler, portable alternative.

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1