Dynamically change CSS rules in JavaScript or jQuery

Question

I'm looking for a way to change the CSS rules of my stylesheet imported in the document. So I have an external stylesheet and some class and div attributes inside. I want to change one of the rules with JavaScript or jQuery.

Here is an example :

.red{     color:red; } 

So the idea is to do something in JavaScript and the HTML knows that now the color is another color like this:

.red{     color:purple; } 

But I want to have this rule for every element that I add in the future by the way of append. So if I add a span with the CSS class .red, the text has to be purple and not red.

I hope I made it clear.

Answer 1

You can inject style declarations into the DOM.

$("head").append('<style>.red { color: purple }</style>');