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

使用 JavaScript 更改 CSS :root 顏色變數

在 Web 開發中，通常需要根據使用者偏好或外部條件動態調整網頁的外觀。實現此目的的常見方法是利用 CSS 自訂屬性，也稱為 CSS 變數。這些變數儲存在 :root 元素中，提供了一種集中控制網頁的顏色和其他方面的方法。

要透過 JavaScript 修改這些顏色變量，需要使用標準 CSS.setProperty() 方法。此方法可讓您設定或修改 CSS 屬性或自訂屬性。

在提供的程式碼中，原始方法利用 jQuery 函式庫直接設定 --main-color 變數。但是，這種方法並不成功，因為它不是修改 CSS 變數的標準方法。

使用 JavaScript 更改 :root 顏色變數的正確實作是：

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

這一行直接修改文檔根元素的計算樣式，更新 --main-color 變數的值。透過指定變數名稱和新的顏色值，您可以透過變更配色方案來有效地變更網頁的主題。

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