使用JavaScript 更改CSS :root 顏色變數
使用者旨在實現一個透過調整顏色變數來改變網頁主題的系統定義在CSS的:root 部分。儘管實作了 JavaScript 程式碼來設定主題,但沒有觀察到任何變化。
提供的程式碼嘗試更改 --main-color 變量,但它沒有使用正確的語法。在 JavaScript 中修改 :root 變數的正確方法是使用 document.documentElement.style.setProperty() 方法。應將以下行加入 JavaScript 程式碼:
document.documentElement.style.setProperty('--main-color', '#YOURCOLOR');
其中 #YOURCOLOR 表示所需的顏色值。例如,要將主顏色設為藍色,應使用以下行:
document.documentElement.style.setProperty('--main-color', '#0000FF');
透過將此行合併到JavaScript 程式碼中,使用者將能夠動態更改:root 顏色變量,讓他們可以自訂網頁的主題。
以上是為什麼我的 JavaScript 更改不影響我的 CSS :root 變數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!