Wie kann ich CSS-Stylesheet-Werte mit JavaScript ändern?
Oct 26, 2024 am 04:38 AMAuf 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:
- Rufen Sie alle Stylesheets mit document.styleSheets ab.
- Bestimmen Sie das gewünschte Stylesheet anhand seiner href-Eigenschaft.
- Rufen Sie das Regelarray ab (z. B. cssRules in den meisten Browsern, Regeln im IE).
- 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:
- Legen Sie die Eigenschaft selectorText fest, um den Selektor zu ändern (z. B. von #tId zu #newId).
- 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!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ersetzen Sie Stringzeichen in JavaScript

Benutzerdefinierte Google -Search -API -Setup -Tutorial

8 atemberaubende JQuery -Seiten -Layout -Plugins

Erstellen Sie Ihre eigenen AJAX -Webanwendungen

10 JavaScript & JQuery MVC -Tutorials
