Retrieving Inherited CSS Styles with DOM

If you need to get a CSS style from an element in a document, you cannot just test the style of the element directly. That is: Element.style.nameOfStyle won’t work. Take this example:

<p style="white-space:pre">
  Hello world - <b> A  B  C  D </b>
</p>

The immediate white space style of the bold element in the DOM will be normal (default for bold element). However the style is actually pre, since it inherits it from the paragraph ancestor element.

Quirksmode nicely addresses how to go about this. Check it out.
However their script is not practical because the style you want to request must be formatted in a way depending on how their script will execute. Here is an improved solution which addresses this:

/**
 * Retreives a CSS style directly set for or inherited by a given dom node.
 * 
 * @see www.quirksmode.org/dom/getstyles.html
 * 
 * @param {Node} node A dom node.
 * @param {String} styleProp A CSS style property, formatted in CSS notation.
 * @return {String} The inherited style of the given node. Undefined if the node does not have the style.
 *                 If the node is not an element, then the first ancestor element is selected.
 *                 
 */
function getStyle(node, styleProp) {
    
    while (node && node.nodeType != Node.ELEMENT_NODE) {
        node = node.parentNode;
    }
    if (!node) return;
    
    if (window.getComputedStyle) { // DOM Spec
       return document.defaultView.getComputedStyle(node,"").getPropertyValue(styleProp)
       
    } else if (node.currentStyle) { // MS HTML
    
        // Convert CSS Style notation to Javascript notation
        var index = styleProp.indexOf("-");
        while (index > -1) {
            styleProp = (index == (styleProp.length-1)) ? 
                styleProp.substr(0, index) :
                styleProp.substr(0, index) + styleProp.charAt(index+1).toUpperCase() + styleProp.substr(index + 2);
            index = styleProp.indexOf("-");
        }
        
        return node.currentStyle[styleProp];
        
    }
    // Otherwise undefined...
}

So if the browser supports the getComputedStyle it will use that. Otherwise it will go the “Explorer way” and format the style argument from CSS notation to Javascript notation (camal case) and index into the associative array currentStyle.

Opera can support both ways, but will choose the first option since in this implementation is potentially faster. You can switch the precedence around to have Explorer browsers in favor; where its method is tested first and the style argument is formatted in javascript notation.

Hope that is helpful.
If you find an incompatible browser please post the details 🙂

Advertisements

One thought on “Retrieving Inherited CSS Styles with DOM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s