Accessing Style Sheets in JavaScript

Here is the JavaScript code that will retrieve a style by its selector name. Note that it works only on Mozilla; it doesn't appear to work properly in IE4.

   function getStyleBySelector( selector )
   {
       var sheetList = document.styleSheets;
       var ruleList;
       var i, j;
   
       /* look through stylesheets in reverse order that
          they appear in the document */
       for (i=sheetList.length-1; i >= 0; i--)
       {
           ruleList = sheetList[i].cssRules;
           for (j=0; j<ruleList.length; j++)
           {
               if (ruleList[j].type == CSSRule.STYLE_RULE && 
                   ruleList[j].selectorText == selector)
               {
                   return ruleList[j].style;
               }   
           }
       }
       return null;
   }

This will work with any selector, so you can find the style associated with, say, the <h3> tag by calling getStyleBySelector("h3"), the style associated with a <p class="footnote"> tag by calling getStyleBySelector("p.footnote"), or the style associated with id="card1" by calling getStyleBySelector("#card1").

Note: Mozilla M14 will not correctly find a style if it is in an imported stylesheet (using @ notation). It causes a JavaScript error.

Accessing Style Sheets

Index

JavaScript Access Example