Kann JavaScript CSS-Regelsätze dynamisch ändern?

CSS-Regelsätze mit JavaScript manipulieren

Frage:

Können CSS-Regelsätze mit JavaScript dynamisch geändert werden? B. das Ändern des Stils mehrerer Elemente derselben Klasse in einem Web Seite?

Antwort:

Obwohl es möglich ist, solche CSS-Änderungen mit JavaScript vorzunehmen, ist der Prozess mit einigen Komplexitäten verbunden. Eine ausführliche Anleitung hierzu finden Sie im Artikel „Totally Pwn CSS with Javascript“.

Um die oben genannte Änderung umzusetzen, folgen Sie diesen Schritten:

1. Zugriff auf den Regelsatz mit DOM-Methoden.
2. Ändern Sie die Regelsatzeigenschaften nach Bedarf.
3. Wenden Sie den aktualisierten Regelsatz erneut an Elemente.

Implementierung:

Firefox und IE: Der folgende Code wurde getestet, um in diesen Browsern zu funktionieren:

// Access the rule-set
var styleSheet = document.styleSheets[0]; // assuming there's only one
var ruleSet = styleSheet.cssRules[0]; // assuming there's only one

// Modify the rule-set
ruleSet.style.color = "red";

// Reapply the updated rule-set
stylesheet.insertRule(ruleSet.cssText, 0);

Chrome: Mit Updates in Chrome Unterstützung für die oben genannten DOM-Methoden ist jetzt verfügbar.

Das obige ist der detaillierte Inhalt vonKann JavaScript CSS-Regelsätze dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!