11.12 Reading Effective Style Sheet Property Values
NN 6, IE 5
11.12.1 Problem
You want a script to
ascertain the value of a style sheet property initially set via a
<style> tag or imported style sheet.
11.12.2 Solution
The following getElementStyle(
) function works with browsers that
support W3C DOM element referencing syntax, and either the IE
currentStyle object or W3C DOM
window.getComputedStyle( ) method:
function getElementStyle(elemID, IEStyleProp, CSSStyleProp) {
var elem = document.getElementById(elemID);
if (elem.currentStyle) {
return elem.currentStyle[IEStyleProp];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(elem, "");
return compStyle.getPropertyValue(CSSStyleProp);
}
return "";
}
The function returns the value that the browser uses to govern the
property whose name (in IE and CSS forms) is passed as a parameter.
11.12.3 Discussion
You might normally think of reading the value of an
element's style sheet property by simply reading the
style.propertyName
property of the element. This works, however, only when the property
is assigned via the style attribute of the element
or the value is previously modified by script. But because it is more
common (if not recommended) to bind style sheet rules to elements
from a distance (in a <style> tag or
imported through <link> tags or
@import rules), this otherwise simple approach
does not work. The value comes back as an empty string, even though
there is a computed style sheet value being applied to the element at
the time.
To read these distant style assignments requires help from the
browser's DOM. Internet Explorer includes in its DOM
an element object property called currentStyle.
This object has most (but not all) of the same properties as an
element's style property, but the
values are read-only, and convey the effective style sheet property
governing the element. This includes any default style property
values (imposed from the browser's own default style
sheet).
On a Mozilla-based browser, the W3C DOM mechanism of the
window object's
getComputedStyle(
) method returns an object that also
contains properties similar to an element's
style property. Using this method, however, is a
two-step process: first get the style object
(technically, it's a
CSSStyleDeclaration object in W3C DOM parlance),
and then invoke the getPropertyValue( ) method on
the style object.
As if the diverse models for this property inspection
weren't enough, the two approaches frequently
require different ways of referring to the style properties. In the
case of the IE currentStyle object, references are
made via the same object model syntax as is used for getting and
setting style values. Therefore, hyphenated CSS property names must
be referenced via the intercapitalization system (e.g.,
margin-left becomes
marginLeft). But the property name for the W3C DOM
getPropertyValue( ) method must be in the CSS
property format (e.g., margin-left is
margin-left). That's why the
getElementStyle( ) function shown in the recipe
requires two parameters for the style property name. The first is for
the IE type; the second is for the W3C/CSS type. All parameter values
are strings. For example, to retrieve the effective background color
of an element named myDiv, the call is:
var divColor = getElementStyle("myDiv", "backgroundColor", "background-color");
Also be aware that for some CSS properties, different browser
versions may return different value types—especially in colors
that are specified by CSS syntax other than
rgb(r,g,b). For example, if you set the color with
a plain-language color name (e.g., orange), the
value returned from the browsers may be in a different format. For
the most part, if you specify colors in rgb(r,g,b)
format, you'll get that back (except in Netscape
6.2).
CSS values consisting of length measurements typically contain units
(pixels, points, ems, and so on). If you intend to utilize the value
of a style property for any math, such as adding five pixels to the
left edge of a positioned element, be sure to extract the numeric
portion of string values that include units. Use the
parseInt( ) function for integers and the
parseFloat( ) function for numeric values that may
have digits to the right of the decimal (e.g.,
0.5em).
Once you assign a value to a property of an
element's style object, the value
can be read subsequently through the style
property. But for consistency's sake, you can
continue to read a value through the getElementStyle(
) function because it returns the effective value applied
to the element at any instant.
11.12.4 See Also
Recipe 9.3,
Recipe 9.9, Recipe 13.12, and Recipe 13.13, where getElementStyle(
) is used.
|