Wie kann ich CSS-Stylesheet-Werte mit JavaScript ändern?

Auf CSS-Stile mit JavaScript zugreifen und diese ändern

Beim Ändern von CSS-Stilen mit JavaScript ist es entscheidend, auf die richtigen Elemente und Werte abzuzielen. Inline-CSS-Werte können leicht geändert werden, aber das Abrufen und Ändern der im Stylesheet definierten Werte kann eine Herausforderung sein.

Zugriff auf CSS-Stylesheet-Werte

Um auf CSS-Stylesheet-Werte zuzugreifen, die angegeben sind id, folgen Sie diesen Schritten:

1. Rufen Sie alle Stylesheets mit document.styleSheets ab.
2. Bestimmen Sie das gewünschte Stylesheet anhand seiner href-Eigenschaft.
3. Rufen Sie das Regelarray ab (z. B. cssRules in den meisten Browsern, Regeln im IE).
4. Identifizieren Sie die spezifische Regel mithilfe ihrer selectorText-Eigenschaft.

Ändern von CSS-Stylesheet-Werten

Sobald die gewünschte Regel identifiziert ist, können Sie sie ändern:

1. Legen Sie die Eigenschaft selectorText fest, um den Selektor zu ändern (z. B. von #tId zu #newId).
2. Festlegen die Value-Eigenschaft, um den CSS-Wert zu ändern (z. B. von Breite: 50 % auf Breite: 30 %).

Beispiel

Im bereitgestellten Szenario:

<style>
   #tId {
      width: 50%;
   }
</style>

<div id="tId"></div>

Sie können das folgende JavaScript verwenden, um die Breiteneigenschaft im Stylesheet zu ändern:

var rule = document.styleSheets[0].cssRules[0];
rule.selectorText = "#tId";
rule.value = "width: 30%";

Dadurch wird die Stylesheet-Regel aktualisiert auf:

#tId {
      width: 30%;
   }

Beachten Sie, dass Inline-Stile immer noch Vorrang vor Stylesheet-Werten haben. Um Inline-Stile zu überschreiben, verwenden Sie document.getElementById('id').style.width = value.

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