CSS-Wertänderung mit JavaScript

JavaScript bietet eine einfache Möglichkeit, Inline-CSS-Werte festzulegen. Diese Methode kann jedoch eine Herausforderung darstellen, wenn CSS-Werte geändert werden, die in Stylesheets definiert sind, die nicht inline sind.

CSS-Werte aus dem Stylesheet abrufen

So rufen Sie CSS-Werte ab, die es sind JavaScript ist nicht inline und ermöglicht den Zugriff auf Stylesheets über document.styleSheets. Diese Funktion gibt ein Array aller Stylesheets im Dokument zurück. Um das spezifische Stylesheet zu finden, verwenden Sie die Eigenschaft document.styleSheets[styleIndex].href.

Ändern der Stylesheet-CSS-Regeln

Sobald das gewünschte Stylesheet identifiziert ist, folgt der nächste Schritt besteht darin, ein Array von CSS-Regeln zu erhalten. Der Zugriff auf dieses Array erfolgt über die Rules-Eigenschaft für Internet Explorer und über cssRules für die meisten anderen Browser. Jede Regel kann durch ihre selectorText-Eigenschaft unterschieden werden.

Um einen CSS-Wert zu ändern, legen Sie die value-Eigenschaft der Regel fest. Der aktualisierte Code würde etwa so aussehen:

var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText;  //maybe '#tId'
var value = rule.value;            //both selectorText and value are settable.

Mit diesem Ansatz können Sie CSS-Werte global ändern und so alle Elemente effektiv mit dem angegebenen Stil aktualisieren.