如何使用 JavaScript 動態更改 CSS :root 顏色變數？

在JavaScript 中更改CSS :root Color 變數

在Web 開發領域，自訂網頁的視覺美感完成通常是透過以下方式完成通常是透過以下方式完成的CSS 變數的使用。這些變數在 CSS 的 :root 部分中定義，使開發人員能夠控制設計的各個方面。常見的場景是能夠使用 JavaScript 動態變更這些顏色。

要實現這一點，關鍵程式碼是：

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

這一行本質上修改了:root 部分，將其值更新為所需的顏色。例如，如果您想要將--main-color 變數變更為黑色，您可以使用以下程式碼：

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

將此程式碼套用至問題中提供的範例：

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

此更新的程式碼成功修改了--main-color 變量，並在單擊按鈕時動態更改網頁上的顏色。

以上是如何使用 JavaScript 動態更改 CSS :root 顏色變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！