Gelegentlich muß man schon mal mit Javascript das Aussehen einer Webseite während der Laufzeit verändern. Gängigste Methode ist hier zumeist der Zugriff über das Style-Object.

Beispiel: Einen Text rot färben:

<p id="mein-absatz">Beispieltext</p>
<script type="text/javascript">
//<![CDATA[
var p = document.getElementById("mein-absatz");
p.style.color = "#FF0000";
//]]>
</script>

Hier eine Refenzliste aller Properties des Style-Objects.

Was aber tun, wenn man über diese Möglichkeiten hinaus auf das CSS zugreifen muß? So hier ist es z.B. nicht möglich, auf Pseudo-Classes wie

:hover und :active
:visited und :link
:before und :after
:focus
:first-child und :last-child
:first-line und :first-letter
:not und :empty
:root
::selection

zuzugreifen. Auch kann man Pseudo-Eigenschaften nicht inline im XHTML defenieren, wie das bei normalen Style-Eigenschaften möglich ist, z.B. in:

<p style="color: #FF0000;">Beispieltext</p>

Abhilfe schafft hier die weniger bekannte Möglichkeit über das DOM-Stylesheets-API des W3C, das von allen wichtigen Browsern implementiert wird.

Über documents.styleSheets hat man ein Javascript-Array mit allen geladenen Stylesheets des Dokuments als styleSheet-Object zur Verfügung stehen, die wiederum ein cssRules-Array besitzen in dem alle Regeln des Stylesheets als cssRule-Object hinterlegt sind:

document.styleSheets
+ document.styleSheets[0]
  + cssRules
    + cssRules[0]
      + cssText
      + selectorText
      + style
      + parentStyleSheet
    + cssRules[1]
      + etc.
+ document.styleSheets[1]
  + etc.

Ein styleSheet-Object besitzt darüberhinaus noch die Methoden insertRule(rule, index) und deleteRule(index). Über insertRule(rule, index) kann man dann z.B. zur Laufzeit des Dokuments neue Regeln hinzufügen, z.B.:

<script type="text/javascript">
//<![CDATA[
var css = document.styleSheets[0];
var rule = "#mein-absatz:before { content: url(path/to/myimage.png); }";
css.insertRule(rule, css.cssRules.length);
//]]>
</script>

Ein nachträgliches Bearbeiten von vorhandenen CSS-Rules ist offensichtlich nicht mehr möglich, hier muß man die entsprechende Regel zuerst löschen und dann neu setzen, z.B.:

<script type="text/javascript">
//<![CDATA[
var css = document.styleSheets[0];
var rule = "#mein-absatz:before { content: url(path/to/myimage.png); }";
css.insertRule(rule, css.cssRules.length);
css.deleteRule(css.cssRules.length - 1);
rule = "#mein-absatz:before { content: url(path/to/anotherimage.png); }";
css.insertRule(rule, css.cssRules.length);
//]]>
</script>

Der Zugriff auf die Stylesheets eines Dokuments sind somit quasi unbegrenzt.
Weitere Dokumentation zum Stylesheets-Object gibt es hier.

Viel Erfolg!