Wie kann ich CSS-Variablen programmgesteuert mit JavaScript ändern?-CSS-Tutorial-php.cn

Wie kann ich CSS-Variablen programmgesteuert mit JavaScript ändern?

Barbara Streisand

Freigeben： 2024-12-10 18:35:14

Original

742 Leute haben es durchsucht

How Can I Programmatically Change CSS Variables with JavaScript?

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";

Nach dem Login kopieren

el.style. setProperty:

document.documentElement.style.setProperty("--main-background-color", "green");

Nach dem Login kopieren

el.setAttribute:

document.documentElement.setAttribute("style", "--main-background-color: green");

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!