Wie kann ich CSS-Variablen mithilfe von JavaScript dynamisch ändern?

CSS-Variablen mit JS bearbeiten

Sie versuchen, CSS-Variablen zu bearbeiten, um den Stil Ihres Projekts dynamisch zu steuern. Während Sie Variablen wie --main-background-image und --main-text-color definiert haben, tritt ein Fehler auf, wenn Sie versuchen, ihre Werte mithilfe von Attributen zu ändern.

Ursache

Der aufgetretene Fehler ist auf eine falsche Verwendung der setAttribute-Methode zum Ändern von CSS zurückzuführen Variablen.

Lösung

Es gibt drei Methoden zum Bearbeiten von CSS-Variablen mit JS:

• style.cssText:

  document.documentElement.style.cssText = "--main-background-color: red";

• style.setProperty:

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

• setAttribute (mit „style“-Attribut):

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

Ersetzen Sie in Ihrem Code-Snippet die kommentierten Zeilen durch eine der oben genannten Methoden, um die CSS-Variablen erfolgreich zu bearbeiten.

Demo

Bedenken Sie Folgendes Beispiel:

html {
  --main-background-color: rgba(0,0,0,.25);
}

body {
  background-color: var(--main-background-color);
}

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};

In dieser Demo ändert sich der Wert --main-background-color zwei Sekunden nach dem Laden der Seite in Rot.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Variablen mithilfe von JavaScript dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!