Change style sheet

  • This page describes Version 5 scripts which also work in Explorer 4.
  • The W3C approved techniques work (up to a point) in Netscape 6, Explorer 5 on Mac and Ice Browser. There are some hideous bugs in Mozilla 0.9.7.
  • Microsoft has another take on this and uses its own ideas for Explorer 4+ (including Explorer 5 on Mac, which thus supports both ways).
  • The question for 2003: What shall we do with the W3C DOM?

     

    On this page I give a script that changes the style sheet of this page by giving all PRE's a blue colour. I also added some notes on interesting methods and properties of CSS rules.

    Please note the difference between traditional DHTML and this example script. While in DHTML you change the styles of one specific HTML element on the page (usually identified by an ID), this example changes the style sheet of the entire document.

    In traditional DHTML, to make each PRE blue we'd have to go through the entire document, take each separate PRE element, change its color, then go on to the next one.
    Instead, in this script we change the style declaration that defines the layout of the PRE elements, so that with one line of JavaScript we change the colour of all PRE tags in this page.

    First of all some definitions of style sheets, rules and declarations. Then the example, the script and its explanation.

    See also the W3C DOM - CSS compatibility table.

    Definitions

    A page contains one or more style sheets which in turn contain one or more rules which contain the actual style declarations. Our purpose is to change the color declaration of the rule defining the styles of the PRE tags.

    Style sheet

    All linked and embedded style sheets are available in the document.styleSheets array. This page contains the usual linked sheet I use throughout this site, so on this page the styleSheets array contains only one style sheet.

    Rule

    A rule is one set of style declarations for one or more elements, for instance

    PRE {margin-left: 15%;
    	color: #660000;
    	font: 13px courier,monospace;
    	font-weight: 300;
    }
    

    or

    TD,INPUT,SELECT,TEXTAREA {color: #666666;}
    

    There are two ways to access these rules. W3C insists on the cssRules array while Microsoft has decided on the rules array. Both arrays work with index numbers, the first rule is (css)Rules[0], the second one [1] etc.

    The PRE rule is the second one in my style sheet, so if I want to access the style of the PRE tags in my page I should do:

    We are forced to access the rule by index number. What I'd rather do is something like:

    document.styleSheets[0].cssRules['PRE'].etc
    

    so that I can access the rule of the PRE regardless of where in the style sheet it is. It does not seem to have occurred to either W3C or the browser vendors that web developers have a need for such a way of accessing rules. All documentation is completely silent on this point. I did some random tests: they failed.

    Single style declarations

    After we have accessed the desired rule we change one of its style declarations. The general syntax for this is

    rule.style.color = '#0000cc';
    

    The W3C approved way is

    rule.style.setProperty('color','#00cc00',null);
    

    which at this point is only supported by Explorer 5 on Mac. Since even Mozilla seems to be in the process of implementing the style.color syntax and since it is vastly simpler I prefer it above setProperty().

    Example

  • Changing style.color works in Explorer 5+ and Netscape 6
  • setProperty() works in Explorer 5 on Mac, Netscape 6 and Ice Browser
  • Everything goes hideously wrong in Mozilla 0.9.7. On Windows it changes all colours of all elements, on Mac only the colours of H3's, LI's and PRE's.
  • Try changing the colour of all PRE's to blue. Afterwards, you can also try setting them to green with the setProperty method.

    Test PRE
    

    The script

    The script is very simple:

    function changeIt()
    {
    	if (!document.styleSheets) return;
    	var theRules = new Array();
    	if (document.styleSheets[0].cssRules)
    		theRules = document.styleSheets[0].cssRules
    	else if (document.styleSheets[0].rules)
    		theRules = document.styleSheets[0].rules
    	else return
    	theRules[15].style.color = '#0000cc';
    	if (confirm('Also try setProperty?'))
    	document.styleSheets[0].cssRules[1].style.setProperty('color','#00cc00',null);
    }
    

    Explanation

    First check if the browser supports the styleSheets array at all. If it doesn't there's no point in continuing.

    function changeIt()
    {
    	if (!document.styleSheets) return;
    

    Define a new array to hold the rules

    	var theRules = new Array();
    

    If the browser supports the W3C DOM way, put cssRules in theRules.

    	if (document.styleSheets[0].cssRules)
    		theRules = document.styleSheets[0].cssRules
    

    If it supports the Microsoft way, put rules in theRules.

    	else if (document.styleSheets[0].rules)
    		theRules = document.styleSheets[0].rules
    

    If it supports neither, end function.

    	else return
    

    Change the color of rule 1 (the second rule, the one governing the PRE elements).

    	theRules[15].style.color = '#0000cc';
    

    If you wish, you can also try setting the PRE colour to green by the setProperty method.

    	if (confirm('Also try setProperty?'))
    	document.styleSheets[0].cssRules[1].style.setProperty('color','#00cc00',null);
    }
    

    Home