Cooking with JavaScript & DHTML, Part 5

Related Reading JavaScript & DHTML Cookbook Solutions and Example for Web Programmers By Danny Goodman

Editor's note: In last week's sample recipe from JavaScript & DHTML Cookbook, we offered a quick and simple solution to importing browser- or operating system-specific style sheets, excerpted from Chapter 11 on "Managing Style Sheets." In this week's recipe (from the same chapter), find out how to read effective style sheet property values. And if you want to learn how to determine the location of a nonpositioned element, be sure to check back here a week from now for the recipe.

Recipe 11.12: Reading Effective Style Sheet Property Values

NN 6, IE 5

Problem

You want a script to ascertain the value of a style sheet property initially set via a <style> tag or imported style sheet.

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.

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.

See Also

Recipe 9.3, Recipe 9.9, Recipe 13.12, and Recipe 13.13, of JavaScript & DHTML Cookbook, where getElementStyle( ) is used.

Danny Goodman has been writing about technology and computers full-time since 1981 and is the author of Dynamic HTML: The Definitive Reference and "The Complete HyperCard Handbook."

Return to the Web Development DevCenter.