Wie ändere ich CSS-:root-Farbvariablen dynamisch mit JavaScript?

Ändern von CSS-:Root-Farbvariablen in JavaScript

Im Bereich der Webentwicklung wird die visuelle Ästhetik einer Webseite oft durch Anpassen angepasst die Verwendung von CSS-Variablen. Diese im :root-Abschnitt des CSS definierten Variablen ermöglichen es Entwicklern, verschiedene Aspekte des Designs zu steuern. Ein häufiges Szenario ist die Möglichkeit, diese Farben mithilfe von JavaScript dynamisch zu ändern.

Um dies zu erreichen, ist der wichtigste Codeteil:

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

Diese Zeile ändert im Wesentlichen die angegebene CSS-Variable in :root-Abschnitt und aktualisiert seinen Wert auf die gewünschte Farbe. Wenn Sie beispielsweise die Variable --main-color in Schwarz ändern möchten, verwenden Sie den folgenden Code:

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

Anwenden dieses Codes auf das in der Frage bereitgestellte Beispiel:

function setTheme(theme) {
  if (theme == 'Dark') {
    localStorage.setItem('panelTheme', theme);
    $('#current-theme').text(theme);
    document.documentElement.style.setProperty('--main-color', '#000000');
  }
  if (theme == 'Blue') {
    localStorage.setItem('panelTheme',  'Blue');
    $('#current-theme').text('Blue');
    alert("Blue");
  }
  if (theme == 'Green') {
    localStorage.setItem('panelTheme', 'Green');
    $('#current-theme').text('Green');
    alert("Green");
  }
}

Dieser aktualisierte Code ändert erfolgreich die Variable --main-color und ändert dynamisch die Farben auf der Webseite, wenn auf eine Schaltfläche geklickt wird.

Das obige ist der detaillierte Inhalt vonWie ändere ich CSS-:root-Farbvariablen dynamisch mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!