使用 javascript 更改 css 类样式

Question

Given the below css style, how can I reset the background-color with javascript? Not just for the currently highlighted button, but for all those highlighted in the future?

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

For instance: $("div.bottom_button.highlighted").css("background-color", "#e67300"); this works, but is overwritten as soon as the page changes. IE loses focus or updates.

Similarly document.getElementById("bottom_button_" + button).style.backgroundColor = "#e67300"; works to change the numbered button on click, but also doesn't last.

Answer 1

It's going to be difficult to have persistent changes in CSS from page to page with a refresh. That being said you can do it with local storage.

Here's how you do it :

 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; } `);