Wie kann ich in externen Stylesheets definierte CSS-Werte mithilfe von JavaScript ändern?

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

Zum Abrufen von CSS-Werten, die nicht inline 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.

Stylesheet-CSS-Regeln ändern

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:

<code class="javascript">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.</code>

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

Das obige ist der detaillierte Inhalt vonWie kann ich in externen Stylesheets definierte CSS-Werte mithilfe von JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!