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.
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.
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.
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:
Please note that Explorer 5 on Mac supports both arrays.
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.
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().
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 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); }
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); }