JavaScript/Anwendung und Praxis/Stylesheets dynamisch ändern

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im Artikel JavaScript und CSS wurde vorgestellt, wie Sie Formatvorlagen ändern können, indem Sie mit className und classList Klassen ändern, die dann andere Formatierungen haben. Um alternative Stile anzubieten, können Sie Stylesheets dynamisch wechseln oder diese direkt einfügen.

In diesem Artikel lernen Sie, wie Sie direkt in das Stylesheet neue Regeln einfügen können, ohne weitere HTTP-Requests beim Nachladen alternativer Stylesheets zu benötigen.

Inhaltsverzeichnis

[Bearbeiten] CSSOM und CSSStylesheet

Externe Stylesheets werden vom Browser nicht im DOM, sondern in einem eigenen CSS Object Model (CSSOM) erstellt.[1]

Jedes einzelne Stylesheet bildet ein CSSStylesheet-Objekt.

Eigenschaften

  • CSSStyleSheet.cssRules: gibt eine CSSRuleList aller CSS-Festlegungen zurück
  • CSSStyleSheet.ownerRule: Wenn das Stylesheet mittels einer @import-Regel geladen wurde, gibt die ownerRule-Eigenschaft diese CSSImportRule zurück, sonst gibt es null zurück.

Methoden

  • CSSStyleSheet.deleteRule: löscht eine CSS-Festlegung
  • CSSStyleSheet.insertRule: fügt eine CSS-Festlegung in das aktuelle Stylesheet ein
  • CSSStyleSheet.addRule: nichtstandardisierte IE-Methode, um CSS-Festlegung einzufügen

[Bearbeiten] Zugriff auf das CSSStylesheet-Objekt

Sie können auf Ihr Stylesheet entweder über eine id oder das CSSStylesheet-Objekt zugreifen:

Beispiel
var sheets = document.styleSheets; // gibt eine array-ähnliche Liste aller Stylesheets aus

Am einfachsten ist es wohl, auf das erste verfügbare Stylesheet zuzugreifen:

Beispiel
var sheet = document.styleSheet[0];

[Bearbeiten] Methoden

[Bearbeiten] deleteRule

Die CSSStyleSheet.deleteRule-Methode löscht eine CSS-Festlegung.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

stylesheet.deleteRule(index)

Folgende Parameter ist nötig:

  • index: ganze Zahl, welche Festlegung gelöscht werden soll.

[Bearbeiten] insertRule

Die CSSStyleSheet.insertRule-Methode fügt eine CSS-Festlegung in das aktuelle Stylesheet ein.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

stylesheet.insertRule(regel, index)

Folgende Parameter sind nötig:

  • regel: bestehend aus einem DOM-String, der den Selektor und die Festlegung beinhaltet.
  • index: ganze Zahl, an welcher Stelle die Festlegung eingefügt werden soll.
    Empfehlung: Wenn Sie bestehende Regeln überschreiben wollen, benötigen Sie einen anderen Wert als 0.
Beispiel
  sheet.insertRule("#über { background: #c32e04; color: white; }", 1);
Empfehlung: Da Sie immer nur eine Regel einfügen können, empfiehlt es sich bei größeren Änderungen eine @media -Regel einzufügen:
Beispiel
  sheet.insertRule("@media all { Selektor1 { Regel : Wert } Selektor2 { Regel : Wert} }", 1);

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
function changeStylez() {
  var sheet = document.styleSheets[0];
  sheet.insertRule("#über { background: #c32e04; color: white; }", 1);
}

[Bearbeiten] Siehe auch

[Bearbeiten] Weblinks

  1. google.developers: css-object-model-cssom
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML