CSS-Manipulation mit Javascript über das styleSheets-Object

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!

5 Antworten Subscribe to comments


  1. Eckerlein Peter

    Betreff:
    CSS, Herz fliegen oder Schnee fallen

    Hallo,

    ich suche immer noch z.B.: herz fliegen oder Schnee fallen, für CSS Code.
    leider habe ich noch nicht gefunden, da will ich einfügen.
    Aber wo???

    kannst du mir helfen?

    gruß

    peter

    20.06.2007 @ 22:42


  2. Johannes

    Hi!

    Zumindest für fallenden Schnee gibt es eine ganze Reihe von fertigen Javascript-Lösungen, die man leicht auf seine eigene Seite einbauen kann. Einfach mal googeln

    Gutes Gelingen! :-)

    20.06.2007 @ 22:52


  3. Gabriel

    Stylesheet-Regeln direkt zu manipulieren statt die Style-Eigenschaft zu verändern, empfiehlt sich vor allem dann, wenn sehr viele DOM-Objekte von der Style-Änderung betroffen sind. In diesem Fall bringt die Technik einen gewaltigen Performance-Schub.

    03.12.2008 @ 11:38


  4. Cybaer

    > Ein nachträgliches Bearbeiten von vorhandenen CSS-Rules ist offensichtlich nicht mehr möglich

    Doch, das ist möglich. S. meine Helferfunktion cssRule(). Das sähe damit dann so aus:

    cssRule(„#mein-absatz:before“,“content“,“url(path/to/anotherimage.png)“);

    Das Problem bei der stylesheets-Collection ist halt, daß man praktisch nicht fest adressieren kann (also z.B. nimm Sheet Nr. 2 und dort Regel Nr. 4). Die Browser sind leider nicht einheitlich, was die Interpretation der Stylesheets angeht …

    03.09.2009 @ 17:00


  5. Carsten Milkau

    Eine Änderung der Regeln ist überdie Eigenschaften und Methoden der CSSStyleRule-Klasse möglich (Unerklasse von CSSRule).


    var css = document.styleSheets[0]; // first stylesheet
    var rule = css.cssRules.item(0); // first rule

    // change complete rule
    rule.cssText = '#mySelector > .child { color: red; }';
    // change selector
    rule.selectorText = '#mySelector > .child'
    // change complete style block
    rule.style.cssText = 'color: red;';
    // change individual property
    rule.style.setProperty('color', 'red', '');

    Quelle: http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html

    16.07.2012 @ 14:14


Archiv
Kategorien
Suche