JavaScript/Tutorials/Stylesheets dynamisch ändern

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.

CSSOM und CSSStylesheet

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

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

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];

Methoden

deleteRule

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

stylesheet.deleteRule(index)

Folgende Parameter ist nötig:

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

insertRule

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

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);

Anwendungsbeispiel

CSS-Regelsatz hinzufügen ansehen …

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

ansehen …

CSSStyleDeclaration

CSS-Variablen mit setProperty() setzen

Im Tutorial "Einstieg in SVG" gibt eine mit CSS-animation angetriebene SVG-Uhr. Damit sie die aktuelle Uhrzeit anzeigt, wird mittels setProperty() die aktuelle Zeit den CSS-Variablen zugewiesen.

Zeitabfrage in JavaScript ansehen …

document.addEventListener('DOMContentLoaded', function () {
	  
  const svg = document.querySelector('svg');
  const currentTime = new Date();

  svg.style.setProperty('--start-seconds', currentTime.getSeconds());
  svg.style.setProperty('--start-minutes', currentTime.getMinutes());
  svg.style.setProperty('--start-hours', currentTime.getHours() % 12);
});

ansehen …

Das Script beinhaltet einen Eventlistener, der nach dem Laden der Webseite mit new Date() ein neues Datumsobjekt mit der aktuellen Zeit (engl. currentTime) erzeugt.

Siehe auch

• JavaScript/Tutorials/JavaScript und CSS
• JavaScript/Tutorials/Stylesheets dynamisch wechseln

Weblinks

• CCSWG.org: CSS Object Model (CSSOM) (Entwurf vom 29.03.2016)
• W3C: Dynamic style - manipulating CSS with JavaScript

• MDN : CSSStyleSheet API
• David Walsh: Add Rules to Stylesheets with JavaScript