首頁 >web前端 >css教學 >為什麼我的 JavaScript 更改不影響我的 CSS :root 變數?

為什麼我的 JavaScript 更改不影響我的 CSS :root 變數?

Linda Hamilton
Linda Hamilton原創
2024-11-30 05:24:18735瀏覽

Why Aren't My JavaScript Changes Affecting My CSS :root Variables?

使用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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn