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.
Inhaltsverzeichnis
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 eineCSSRuleList
aller CSS-Festlegungen zurückCSSStyleSheet.ownerRule
: Wenn das Stylesheet mittels einer@import
-Regel geladen wurde, gibt dieownerRule
-Eigenschaft dieseCSSImportRule
zurück, sonst gibt esnull
zurück.
Methoden
CSSStyleSheet.deleteRule
: löscht eine CSS-FestlegungCSSStyleSheet.insertRule
: fügt eine CSS-Festlegung in das aktuelle Stylesheet einCSSStyleSheet.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:
var sheets = document.styleSheets; // gibt eine array-ähnliche Liste aller Stylesheets aus
Am einfachsten ist es wohl, auf das erste verfügbare Stylesheet zuzugreifen:
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.
sheet.insertRule("#über { background: #c32e04; color: white; }", 1);
sheet.insertRule("@media all { Selektor1 { Regel : Wert } Selektor2 { Regel : Wert} }", 1);
Anwendungsbeispiel
function changeStylez() {
var sheet = document.styleSheets[0];
sheet.insertRule("#über { background: #c32e04; color: white; }", 1);
}
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.
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);
});
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
Weblinks
- ↑ google.developers: css-object-model-cssom
- 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