如何使用 JavaScript 以程式設計方式更改 CSS 變數？

使用 JavaScript 更改 CSS 變數

透過 CSS 變數控制項目的顏色可以輕鬆設定主題。然而，以程式設計方式設定這些變數可能具有挑戰性。

最初，嘗試使用 setAttribute 和 jQuery 的 .css 方法來修改屬性。然而，這些導致了錯誤。

解：

CSS變數可以使用這三個之一來編輯方法：

• el.style.css文字：

  document.documentElement.style.cssText = "--main-background-color: red";

• el.style。 setProperty:

  document.documentElement.style.setProperty("--main-background-color", "green");

• el.setAttribute:

  document.documentElement.setAttribute("style", "--main-background-color: green");

The

演示：

此演示演示了一個定義背景顏色的 CSS 變量，該背景顏色由 JavaScript 更改2秒後：

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