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

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

在Web 開發中，自訂主題通常涉及利用:root 元素中定義的CSS 自訂屬性（「變數”）。若要透過 JavaScript 動態變更這些顏色，必須了解正確的方法。

使用 JavaScript 設定 CSS 變數的一種方法是透過 document.documentElement.style.setProperty 函數。此函數接受兩個參數：變數名（前綴為 --）和所需的值。例如，要將 --main-color 變數設為黑色：

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

此方法可確保 CSS 變數正確更新並反映 JavaScript 程式碼中的變更。

在提供的程式碼範例，問題是$(':root').css('--main-color', '#000000') 使用jQuery .css() 方法，該方法專為內聯樣式，並不能有效修改CSS 變數。

透過如上所述的 document.documentElement.style.setProperty 函數，您可以使用 JavaScript 成功更改 :root 元素中的 CSS 變量，從而實現動態主題自訂您的網頁。

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