如何更改CSS：JavaScript中的根顏色變量

好吧，我正在爲我的網頁創建一個允許用戶更改主題的系統。我想如何實現這一點是通過將所有顏色作爲變量，並且顏色在CSS的根部分設置。如何更改CSS：JavaScript中的根顏色變量

我想要做的是通過JavaScript更改這些顏色。我查了一下如何去做，但沒有任何我嘗試過的實際工作正常。這裏是我當前的代碼：

CSS：

:root { 
    --main-color: #317EEB; 
    --hover-color: #2764BA; 
    --body-color: #E0E0E0; 
    --box-color: white; 
}

JS：

（代碼來設置主題，它是運行在一個點擊按鈕） - 我沒有刻意添加：根換另2周的主題，因爲它不會在黑暗的主題工作

function setTheme(theme) { 
    if (theme == 'Dark') { 
    localStorage.setItem('panelTheme', theme); 
    $('#current-theme').text(theme); 
    $(':root').css('--main-color', '#000000'); 
    } 
    if (theme == 'Blue') { 
    localStorage.setItem('panelTheme', 'Blue'); 
    $('#current-theme').text('Blue'); 
    alert("Blue"); 
    } 
    if (theme == 'Green') { 
    localStorage.setItem('panelTheme', 'Green'); 
    $('#current-theme').text('Green'); 
    alert("Green"); 
    } 
}

（代碼就是當HTML載入RAN）

function loadTheme() { 
    //Add this to body onload, gets the current theme. If panelTheme is empty, defaults to blue. 
    if (localStorage.getItem('panelTheme') == '') { 
    setTheme('Blue'); 
    } else { 
    setTheme(localStorage.getItem('panelTheme')); 
    $('#current-theme').text(localStorage.getItem('panelTheme')); 
    } 
}

它顯示警報，但實際上並沒有改變任何東西。有人能指引我朝着正確的方向嗎？

來源

2016-06-14 Daedalus

當文檔準備就緒時，您的js是否正在運行？你如何確定它「不會改變什麼」？將您的示例更改爲更接近[MCVE]的內容 – pvg

使用更多代碼更新了OP，很抱歉。 – Daedalus

你期望改變的依然不明顯。例如，在你的控制檯上，你可以輸入'$（'：root'）.css（「background-color」，「＃000000」），然後看看事情的變化。所以如果沒有發生視覺變化，問題可能不是你的代碼（除非它在文檔準備好之前運行） – pvg

謝謝@pvg提供鏈接。爲了理解發生了什麼，我不得不盯着它看，但我終於明白了。

神奇的線我一直在尋找的是這樣的：

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

這也正是我想要它做的事，非常感謝你！

來源

2016-06-14 02:54:50 Daedalus

正是我在找的，謝謝！ – devios1

具有諷刺意味的是，它看起來像getPropertyValue是不是與以下操作：root css變量，但設置 – shabunc

在邊緣爲你工作嗎？ – SerEnder

如何更改CSS：JavaScript中的根顏色變量

回答

相關問題