使用 javascript 更改 css 類樣式

Question

鑒於以下 css 樣式，如何使用 javascript 重置背景顏色？ 不僅針對當前突出顯示的按鈕，還針對將來突出顯示的所有按鈕？

#bottom_buttons > div.bottom_button.highlighted {
    background-color: #343434;
}

例如： $("div.bottom_button.highlighted").css("background-color", "#e67300"); 這有效，但一旦頁面更改就會被覆蓋。 IE 失去焦點或更新。

同樣document.getElementById("bottom_button_" + button).style.backgroundColor = "#e67300"; 可以在單擊時更改編號按鈕，但也不會持久。

Answer 1

通過刷新在頁面之間對 CSS 進行持續更改將是困難的。 話雖如此，您可以使用本地存儲來做到這一點。

這是你如何做到的：

 function overwriteStyles(styles) { var styleOverwrites = document.getElementById('style-overwrites'); if (styleOverwrites === null) { styleOverwrites = document.createElement('style'); styleOverwrites.id = 'style-overwrites'; document.head.appendChild(styleOverwrites); } styleOverwrites.innerHTML = styles; // Save styles to local storage localStorage.setItem('overridden-styles', styles); } // Here styles are grabbed from local storage and loaded for persistence document.addEventListener("DOMContentLoaded", function(event) { var styles = localStorage.getItem('overriden-styles'); if(styles != null) { overwriteStyles(styles); } }); // Example of overwriting styles overwriteStyles(` #bottom_buttons > div.bottom_button.highlighted { background-color: #e67300; } `);