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

Verwenden von JavaScript zum Ändern von CSS-Werten

Bei der Arbeit mit Inline-CSS-Werten in JavaScript kann es leicht zu Situationen kommen, in denen Sie die ändern müssen Werte von Stilen, die in einem externen CSS-Stylesheet definiert sind. Allerdings kann das alleinige Ändern von Inline-Stilen zu Problemen führen.

Wenn Sie beispielsweise einen Inline-Stil mit einer Breite von 30 % haben und eine Stylesheet-Regel die Breite auf 50 % festlegt, wird das Ändern des Inline-Stils diese überschreiben Stylesheet-Wert. Darüber hinaus wird beim Abrufen der Breiteneigenschaft vor dem Festlegen aufgrund des fehlenden Inline-Stils „null“ zurückgegeben, was in Szenarios, in denen die Breite für logische Operationen ermittelt werden muss, zu Problemen führt.

Um dieses Problem zu beheben, benötigen wir eine Möglichkeit, auf die im externen Stylesheet selbst definierten CSS-Werte zuzugreifen und diese zu ändern. Glücklicherweise bietet JavaScript eine Lösung.

Stylesheet-Regeln abrufen

Der erste Schritt besteht darin, die Stylesheet-Objekte abzurufen. Dies kann mit der Eigenschaft „document.styleSheets“ erreicht werden. Es gibt ein Array aller Stylesheets im Dokument zurück.

Um das spezifische Stylesheet zu identifizieren, überprüfen Sie die Eigenschaft „document.styleSheets[styleIndex].href“. Dadurch können Sie das Stylesheet finden, das Sie ändern möchten.

Auf Regelobjekte zugreifen

Sobald Sie das Stylesheet haben, müssen Sie auf die Regelobjekte zugreifen. Diese Objekte repräsentieren einzelne CSS-Regeln innerhalb des Stylesheets. Der verfügbare Name hängt vom Browser ab: „rules“ im Internet Explorer und „cssRules“ in den meisten anderen.

Um beispielsweise eine bestimmte Regel mit einem bestimmten Selektor zu identifizieren, würden Sie die Eigenschaft „selectorText“ von überprüfen jedes Regelobjekt.

Ändern von Regelwerten

Schließlich können Sie die Werte dieser Regeln ändern, indem Sie die Eigenschaft „value“ festlegen. Dadurch können Sie Stile auf Stylesheet-Ebene ändern, was sich auf alle Elemente auswirkt, die mit dem Selektor der Regel übereinstimmen.

Der in der Originalantwort bereitgestellte Codeausschnitt zeigt, wie Stylesheet-Regeln mithilfe von JavaScript abgerufen und geändert werden. Wenn Sie diesem Ansatz folgen, können Sie CSS-Werte ohne die Einschränkungen des Inline-Stils effektiv aktualisieren und so sicherstellen, dass Änderungen konsistent auf mehrere Elemente im Dokument angewendet werden.

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