Diese Seite enthält ein Stylesheet (gültig für alle Medien) mit den Farbdefinitionen: Hintergrund = gelb & Schrift = rot

Änderungen mit setCssStyle():

1. Schrift rot färben: setCssStyle("body","color","navy");
   (es wird das 1. Stylesheet geändert, sofern möglich)
2. Hintergrund gelb färben: setCssStyle("body","background-color","silver");
   (es wird das 1. Stylesheet geändert, sofern möglich)
3. Schriftgröße auf 110% setzen: setCssStyle("body","font-size","110%");
   (es wird das 1. Stylesheet ergänzt, sofern möglich)
4. P- & LI-Elemente kursiv setzen:
   setCssStyle("p, li","font-style","italic");
   (es wird ein neues Stylesheet angelegt)
5. Drucklayout setzen: setCssStyle("body","font-weight","bold","print");
   (es wird ein neues Druckerstylesheet angelegt)
6. Drucklayout setzen: setCssStyle("body","color","black","print");
   (die Regel im bestehenden Druckerstylesheet wird ergänzt, sofern möglich)
7. Drucklayout setzen: setCssStyle("body","background-color","white","print");
   (die Regel im bestehenden Druckerstylesheet wird ergänzt, sofern möglich)
8. Drucklayout setzen: setCssStyle("p, li","font-style","normal","print");
   (es wird ein neues Druckerstylesheet angelegt)

Die Druckversion dieser Seite sollte anschließend fetten, schwarzen Text auf weißem Grund darstellen (s. Druckvorschau des Browsers).

Interna: setCssStyle() versucht zuerst, eine passende Regel zu finden, um diese zu ergänzen bzw. zu ändern (mittels cssRule()). Gelingt dies nicht (keine passende Regel gefunden oder Browser zu alt), wird versucht, ein neues Stylesheet mit einer entsprechenden Regel anzulegen (mittels addStyle()). Üblicherweise können die modernen DOM-Browser die dynamisch Stylesheets erstellen können (Internet Explorer 4+, Mozilla/Firefox, Konqueror/Safari, ...), auch dynamisch Regeln ändern. Ausnahme ist der Opera. Er gehört zwar auch zu den "modernen DOM-Browsern", kann also dynamisch neue Stylesheets erstellen, die Fähigkeit, diese auch dynamisch zu ändern, kam aber erst mit der Version 9. Opera 8 z.B. wird also diesen Test zwar ebenfalls erfolgreich absolvieren, jedoch jedesmal ein neues Stylesheet anlegen. Er hat am Ende des Tests dann insgesamt 9 Stylesheets (1 altes statisches, 8 neue dynamische ), die sich gegenseitig immer wieder überschreiben - was für die Optik allerdings keine Rolle spielt.

Üblicherweise hat ein Browser nach diesem Test 3 Stylesheets:

1. Ein mehrfach geändertes allgemeines Stylesheet, das bereits statisch angelegt war.
2. Ein neues, ebenfalls mehrfach geändertes Stylesheet für Drucker.
3. Ein weiteres, neues Stylesheet für Drucker.

Warum zwei neue Drucker-Stylesheets und nicht einfach eines? cssRule() kann bestehende Regeln in Stylesheets ändern, nicht aber gänzlich neue Regeln zu bestehenden Stylesheets hinzufügen - das ist die Aufgabe von addStyle(). Das Problem ist, daß es keine (größeren) Schwierigkeiten gibt, interne oder externe Stylesheets zu ändern. Aber die Methode um interne oder externe Stylesheets zu ergänzen funktioniert nicht auf allen Browsern (Bugs und prinzipiell unvollständige DOM-Implementationen). Sehr wohl funktioniert aber, mit einem Workaround, das Ergänzen von internen (nicht aber externen!) Stylesheets. Da cssRule() (intern & extern) also prinzipiell anders arbeitet als addStyle() (nur intern), arbeitet setCssStyle() in diesem Punkt der Einfachheit halber auch nur mit internen Stylesheets - und läßt ggf. ein neues anlegen, wenn cssRule() keine passende Regel zum Ändern gefunden hat.
Mit zusätzlichen Prüfungen wäre es zwar möglich, automatisch das letzte interne Stylesheet gleichen Typs mit addStyle() zu ergänzen und ein neues nur anzulegen, wenn es wirklich notwendig ist, doch der Aufwand steht nicht im Verhältnis zum (nur theoretischen) Nutzen. Wer unbedingt sicherstellen möchte, ein bestimmtes Stylesheet um eine neue Regel zu erweitern, der muß addStyle() direkt anwenden. Die Nummer eines zu ergänzenden STYLE-Elements kann der Funktion ja übergeben werden ...