Warum wirken sich meine JavaScript-Änderungen nicht auf meine CSS-:root-Variablen aus?

CSS ändern: Root-Farbvariablen mit JavaScript

Ein Benutzer möchte ein System implementieren, das das Thema einer Webseite durch Anpassen von Farbvariablen ändert definiert im :root-Abschnitt von CSS. Trotz der Implementierung eines JavaScript-Codes zum Festlegen des Themas werden keine Änderungen beobachtet.

Der bereitgestellte Code versucht, die Variable --main-color zu ändern, verwendet jedoch nicht die richtige Syntax. Der richtige Weg, :root-Variablen in JavaScript zu ändern, ist die Verwendung der Methode document.documentElement.style.setProperty(). Dem JavaScript-Code sollte die folgende Zeile hinzugefügt werden:

document.documentElement.style.setProperty('--main-color', '#YOURCOLOR');

Wobei #YOURCOLOR den gewünschten Farbwert darstellt. Um beispielsweise die Hauptfarbe auf Blau zu setzen, sollte die folgende Zeile verwendet werden:

document.documentElement.style.setProperty('--main-color', '#0000FF');

Durch die Einbindung dieser Zeile in den JavaScript-Code kann der Benutzer die :root-Farbvariablen dynamisch ändern, So können sie das Thema ihrer Webseite anpassen.

Das obige ist der detaillierte Inhalt vonWarum wirken sich meine JavaScript-Änderungen nicht auf meine CSS-:root-Variablen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!