Get Element StyleSheet Style in JavaScript

Question

I've been using John Resig's getStyle function from Pro JavaScript Techniques to get the style of elements:

function getStyle(elem, name) {
    // J/S Pro Techniques p136
    if (elem.style[name]) {
        return elem.style[name];
    } else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    } else {
        return null;
    }
}

However this method returns default styles for an element if no style is specified:

http://johnboxall.github.com/test/getStyle.html

alt text http://img.skitch.com/20081227-8qhxie51py21yxuq7scy32635a.png

Is it possible to get only the stylesheet specified styles of an element (and return null if the style is undefined)?

Update:

Why do I need such a beast? I'm building a small component that allows users to style elements. One of the styles that can be applied is text-align - left, center, right - Using getStyle unstyled elements default to center. This makes it impossible to tell whether the element is centered because the user wanted it to be centered or is centered because that's the default style.

Answer 1

Is it possible to get only the stylesheet specified styles of an element (and return null if the style is undefined)?

That's effectively what is done by the routine you present. The problem is, in most scenarios, most styles are not undefined - they're inherited and/or defined by the individual browser's internal stylesheet.

You could, with a whole lot of effort, iterate through all of the rules defining the style in question, in all of the stylesheets in the current view of the document, evaluate them for the element in question, and if none applied... and if none applied to a parent (or this particular style is not inherited)... then consider it undefined. This would be slow, and incredibly error-prone. I would not recommend trying it.

Perhaps you would do better to step back and ask why you would ever need such a thing?

Answer 2

Maybe your component can wrap the styles that it controls? Then when a style is set through the component the component knows what the user wants.