Change CSS class properties with jQuery

Question

Is there a way to change the properties of a CSS class, not the element properties, using jQuery?

This is a practical example:

I have a div with class red

.red {background: red;} 

I want to change class red background property, not elements that have class red background assigned.

If I do it with jQuery .css() method:

$('.red').css('background','green'); 

it will affect the elements that right now have class red. Up to here everything is fine. But if I make an Ajax call, and insert more divs with red class, those won't have a green background, they will have the initial red background.

I could call jQuery .css() method again. But I would like to know if there is a way to change the class itself. Please consider this is just a basic example.

Answer 1

You can't change CSS properties directly with jQuery. But you can achieve the same effect in at least two ways.

Dynamically Load CSS from a File

function updateStyleSheet(filename) {     newstylesheet = "style_" + filename + ".css";      if ($("#dynamic_css").length == 0) {         $("head").append("<link>")         css = $("head").children(":last");          css.attr({           id: "dynamic_css",           rel:  "stylesheet",           type: "text/css",           href: newstylesheet         });     } else {         $("#dynamic_css").attr("href",newstylesheet);     } } 

The example above is copied from:

• How To Switch CSS Files On-The-Fly Using jQuery

Dynamically Add a Style Element

$("head").append('<style type="text/css"></style>'); var newStyleElement = $("head").children(':last'); newStyleElement.html('.red{background:green;}'); 

The example code is copied from this JSFiddle fiddle originally referenced by Alvaro in their comment.

Answer 2

In case you cannot use different stylesheet by dynamically loading it, you can use this function to modify CSS class. Hope it helps you...

function changeCss(className, classValue) {     // we need invisible container to store additional css definitions     var cssMainContainer = $('#css-modifier-container');     if (cssMainContainer.length == 0) {         var cssMainContainer = $('<div id="css-modifier-container"></div>');         cssMainContainer.hide();         cssMainContainer.appendTo($('body'));     }      // and we need one div for each class     classContainer = cssMainContainer.find('div[data-class="' + className + '"]');     if (classContainer.length == 0) {         classContainer = $('<div data-class="' + className + '"></div>');         classContainer.appendTo(cssMainContainer);     }      // append additional style     classContainer.html('<style>' + className + ' {' + classValue + '}</style>'); } 

This function will take any class name and replace any previously set values with the new value. Note, you can add multiple values by passing the following into classValue: "background: blue; color:yellow".