Heim >Web-Frontend >CSS-Tutorial >Wie kann ich CSS-Variablen programmgesteuert mit JavaScript ändern?
Wie kann ich CSS-Variablen programmgesteuert mit JavaScript ändern?
- Barbara StreisandOriginal
- 2024-12-10 18:35:14687Durchsuche
CSS-Variablen mit JavaScript ändern
Die Steuerung der Farben eines Projekts über CSS-Variablen ermöglicht eine einfache Themengestaltung. Das programmgesteuerte Festlegen dieser Variablen kann jedoch eine Herausforderung sein.
Zunächst wurden Versuche unternommen, das Attribut mithilfe von setAttribute und der .css-Methode von jQuery zu ändern. Diese führten jedoch zu Fehlern.
Lösung:
CSS-Variablen können mit einer dieser drei bearbeitet werden Methoden:
-
el.style.cssText:
document.documentElement.style.cssText = "--main-background-color: red";
-
el.style. setProperty:
document.documentElement.style.setProperty("--main-background-color", "green"); -
el.setAttribute:
document.documentElement.setAttribute("style", "--main-background-color: green");
The Die letzte Methode wurde ursprünglich verwendet, hatte jedoch eine falsche Syntax.
Demo:
Diese Demo demonstriert eine CSS-Variable, die eine Hintergrundfarbe definiert, die durch JavaScript geändert wird nach 2 Sekunden:
<html>
<head>
<style>
html {
--main-background-image: url(../images/starsBackground.jpg);
--main-text-color: #4CAF50;
--main-background-color: rgba(0,0,0,.25);
--beta-background-color: rgba(0,0,0,.85);
}
body {
background-color: var(--main-background-color);
}
</style>
</head>
<body onload="setTimeout(function() {
document.documentElement.style.cssText = '--main-background-color: red';
}, 2000);">
</body>
</html>Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Variablen programmgesteuert mit JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!