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

如何使用 JavaScript 動態變更 CSS 變數

在使用 JavaScript 修改 CSS 變數的過程中，您可能遇到了挑戰。此查詢探索了一個可行的解決方案，詳細說明了實現目標的正確方法。

嘗試的初始方法，例如在 HTML 中設定「--main-text-color」屬性或使用 jQuery 的「css( )」方法，不幸的是產生了無效的屬性錯誤。成功編輯 CSS 變數的關鍵在於利用替代方法。

一種可靠的技術涉及利用「el.style.cssText」屬性。透過將 CSS 字串指派給此屬性，您可以同時指定多個 CSS 變數指派。例如，要將“--main-background-color”變數變更為紅色，請執行下列程式碼：

另一個選項是使用「el.style.setProperty」方法。此方法接受兩個參數：您要修改的CSS 屬性（例如“--main-background-color”）及其新值（例如“green”）：

最後，您還可以透過指定“style”作為屬性名稱並提供包含CSS變數賦值的字串來求助於「el.setAttribute」方法，如下所示：

為了實際說明這些方法，請考慮以下示範。當頁面載入時，它呈現由 CSS 變數定義的背景顏色，隨後使用 JavaScript 更改該背景顏色以演示動態變數修改：

[範例程式碼]

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