Dynamically change CSS rules in JavaScript or jQuery

javascript jquery css dynamic stylesheet
Simon picture Simon · Aug 16, 2012 · Viewed 32.2k times · Source

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

Grim... picture Grim... · Aug 16, 2012

You can inject style declarations into the DOM.

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

Related questions

Modifying CSS class property values on the fly with JavaScript / jQuery

I've run into a unique situation that I have so far been unable to find a solution for: dynamically assigning a value to a CSS style. I know how to use jQuery to assign width, height, etc. to an element, …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More