Build User-Controlled Style Sheets for Greater Accessibility

Lines 2-4 determine which version of the DOM is being used, and set up a series of variables to store this information. Lines 7-20 load the JavaScript object into a variable called obj using the method appropriate for the browser.

Notice that lines 7-10 simply post an alert. This is necessary because Netscape Versions 4 and earlier do not allow us to change font styles after the page has loaded.

Lines 22-24 are the heart of our script, changing the text color to yellow, the background color to black, and increase font size by 300%.

Finally, notice that this implementation of the changeStyles( ) function takes id as an input argument, indicating the ID of the element whose style is to be changed. This requires us to change the way we call the function, as shown below.

<p><a href="javascript:;" onClick="changeStyles('test');">Change  
styles</a>
The advantage of this approach is that it's fairly straightforward. If you are familiar with Dynamic HTML, the method is easy to follow.

But this approach is also brittle. In practice, it's a little awkward to wrap a DIV element around your entire page content. More seriously, use of the DIV element poses inheritance problems under Internet Explorer, where the H2 tag containing the page headline doesn't inherit the font size assigned to the DIV.

As a result, this method is best used on a limited scale, when we only want to change the style of selected areas of our page.

Changing Elements by Selector

A more flexible method for giving users control over text presentation is to let them change styles at the selector level. A CSS selector is the left-hand portion of a style rule -- the part that defines the HTML elements to which the rule applies. For example, the P tag is the selector in the CSS rule shown below.

P   { font-size: 12pt; font-family: Arial }

If we change the style associated with any given selector, this will change large portions of our document with minimum of effort.

The code below shows a rewrite of our script to do this.

     1: <script>  
     2: ns4 = document.layers;  
     3: ie  = document.all;  
     4: ns6 = document.getElementById && !document.all;  
     5:  
     6: function changeStyle (selector) {  
     7:    if (ns4) {  
     8:       alert ("Sorry, but NS4 does not allow font changes.");  
     9:       return false;  
    10:    }  
    11:    else if (ie) {  
    12:       setNewStyle('P');  
    13:       setNewStyle('H2');  
    14:    }  
    15:    else if (ns6) {  
    16:       alert('Sorry, Netscape does not support this function.');  
    17:    }  
    18:  
    19:    return true;  
    20: }  
    21:  
    22: function setNewStyle(selector) {  
    23:    style = getStyleObj(selector);  
    24:    if (!style) return false;  
    25:  
    26:    style.color = "yellow";  
    27:    style.backgroundColor = "black";  
    28:    style.fontSize = "300%";  
    29: }  
    30:  
    31: function getStyleObj (selector) {  
    32:    for (x=0; x < document.styleSheets.length; x++) {  
    33:       var oStyleSheet = document.styleSheets[x];  
    34:       if (ie4) {  
    35:          for (y=0; y < oStyleSheet.rules.length; y++) {  
    36:             var oRule = oStyleSheet.rules[y];  
    37:             if (oRule.selectorText == selector) {  
    38:                return oRule.style;  
    39:            }  
    40:         }  
    41:       }  
    42:    }  
    43:    return false;  
    44: }  
    45:  
    46: </script>

The changeStyle( ) function again branches based on the browser being used. Lines 12-13 apply to Internet Explorer and involve two separate calls to a setNewStyle( ) function: one call to change all P elements and another to change all H2 elements.

The setNewStyle( ) function is defined in lines 22-29. It begins by calling another function called getStyleObj( ) to fetch the JavaScript object corresponding to the selector input argument, and then sets the font size, color, and background color of the element.

So far this version of our script isn't much different from our earlier ID-based approach. However, the heart of our script is the function getStyleObj( ) defined on lines 31-44. This code searches all style sheets associated with the document, checks style rule defined in each of these sheets, and tests if the rule's selectorText property matches the selector input argument passed to the function. The function returns the style object for the first rule matching our selector criteria.

Note that getStyleObject( ) will work only if a style rule has been defined for a given selector. If no rule exists, then getStyleObj( ) will return false. So in order for this code to work properly for our test page, we need to add a STYLE element defining rules for P and H2 elements, as shown below.

<style>  
P { font-size : 10pt; }  
H2 { font-size : 10pt; }  
</style>

By this point you may also have noticed the significant limitation of this method: it only works for Internet Explorer. A bug in the Gecko rendering engine, which is used by Netscape Versions 6-7 browsers, keeps the selectorText property from working properly. This was corrected in recent versions of Gecko, but not soon enough to support Netscape 7.

So, while this approach provides a lot of flexibility, it is perhaps best used on an Intranet where Internet Explorer is the standard browser.