JavaScript: Checking if a CSS class exists

To check if a CSS class exists, in newer browers you can use the document.stylesSheets property for CSS loaded as separate files or as <style ...>, but not inline styles like <div style="attr: value;"

function verifyStyle(selector) {
    var rules;
    var haveRule = false;

    if (typeof document.styleSheets != "undefined") {   //is this supported
        var cssSheets = document.styleSheets;

        outerloop:
        for (var i = 0; i < cssSheets.length; i++) {

             //using IE or FireFox/Standards Compliant
            rules =  (typeof cssSheets[i].cssRules != "undefined") ? cssSheets[i].cssRules : cssSheets[i].rules;

             for (var j = 0; j < rules.length; j++) {
                 if (rules[j].selectorText == selector) {
                         haveRule = true;
                        break outerloop;
                 }
            }//innerloop

        }//outer loop
    }//endif

    return haveRule;
}//eof

The value for selector should be exactly what is in the CSS including dots #s and spaces

So to verify .className {....}

call the function like
var ok = verifyStyle(".className");

ljo8877,
  That's pretty good work, but it doesn't work.  From what I can tell, it's because the main stylesheet linked to the document uses @import to link to another stylesheet that actually contains the selector I'd be searching for.  This function doesn't take into account import collections.  At least that's my guess.

- Sean

 If it makes a difference, the script works like this:  The script among other things displays fancy JavaScript tooltips over page links.  The person using the script can control the look of the tooltip -- text color, background color, border, etc -- by adding the class '.tooltip' to the documents stylesheet.  If the class 'tooltip' exists, then great, the script will apply that class to the tooltips DIV container.  If however the class doesn't exists in the stylesheet then some default styles will be used.
  The biggest problem is the script is meant to run within WordPress, and WP seems to always use @import to attach the theme's stylesheet to the document.  A standard function to run though each stylesheet and find the selector won't work because of that.

- Sean

You're correct. It should work. According to the book "Dynamic HTML the Definative Reference" by Danny Goodman O'Reilly press, the document.styleSheet collection include styles created with an @import statement inside a style sheet  element. But, as is often the case things don't work as intended. In FireFox document.styleSheet[i].cssRules[i].cssText is "@import url(style.css)" and the content of styles.css isn't available.

However, IE has an imports collection that may help (in IE) it is accessed as document.styleSheet[i].imports[i]. I don't have IE availble here so I can't check it out.

Personally, I quite using @import because of browser incompatabilities with some more obscure browsers.