Wie ändere ich CSS-Variablen mithilfe von JavaScript korrekt?

So bearbeiten Sie CSS-Variablen mit JavaScript mithilfe von Style.setProperty

In CSS können Sie mit Variablen Farbthemen und andere Einstellungen einmalig definieren Verwenden Sie sie während Ihres gesamten Projekts. Um diese Variablen dynamisch mit JavaScript zu bearbeiten, müssen Sie die entsprechenden Methoden verwenden.

Falsche Methode:

In Ihrem Code haben Sie versucht, die CSS-Variable mithilfe von setAttribute zu aktualisieren. Diese Methode ist jedoch zum Bearbeiten von CSS-Variablen ungültig.

Richtige Methoden:

Es gibt drei korrekte Methoden zum Bearbeiten von CSS-Variablen JavaScript:

1. documentElement.style.cssText:

   • Syntax: documentElement.style.cssText = "--variable-name: neuer Wert"

2. documentElement.style.setProperty:

   • Syntax: documentElement.style.setProperty("- -Variablenname", "new-value")

3. documentElement.setAttribute('style'):

   • Syntax: documentElement.setAttribute ('style', "--variable-name: neuer Wert")

Beispiel:

So ändern Sie die Variable --main-background-color in Rot:

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

Demo:

  
    
  


  
    <script>
      function changeColor() {
        setTimeout(() => {
          document.documentElement.style.cssText = &quot;--main-background-color: red&quot;;
        }, 2000);
      }
    </script>
  

In diesem Demo: Die Hintergrundfarbe wechselt nach 2 Sekunden nach dem Laden der Seite zu Rot.

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