使用 JS 編輯 CSS 變數
您正在嘗試編輯 CSS 變數以動態控制項目的樣式。雖然您已經定義了諸如 --main-background-image 和 --main-text-color 之類的變量,但在嘗試使用屬性更改它們的值時會遇到錯誤。
根本原因
您遇到的錯誤是由於錯誤地使用了setAttribute 方法來更改CSS
解決方案
編輯CSS 變數的方法有以下三種: JS:
style.cssText:
1 |
|
style.setProperty:
1 |
|
setAttribute (帶有「style」屬性):
1 |
|
在您的程式碼片段中,將註解行替換為上述方法之一以成功編輯CSS變數。
示範
考慮以下內容範例:
1 2 3 4 5 6 7 |
|
1 2 3 4 5 |
|
在此示範中,--main-background-color 值在頁面載入後兩秒變為紅色。
以上是如何使用 JavaScript 動態更改 CSS 變數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!