Change attributes in CSS class with JQuery [duplicate]

Question

I can't figure out how I can change an attribute in a CSS Class. Right now I add a style to that specific div, but what I want is for the attribute in the CSS class to be changed, and not just overridden by the new style attribute.

An example:

.example{background-color:blue}

<div class="example">example</div>

So how can I then change the background-color in the .example CSS and not just by overriding it like this:

<div class="example" style="background-color:blue">example</div>

I have tried a lot of things, but I cant figure it out. I have tried .attr() and .css(), but am I missing something.

Answer 1

You can't change the actual CSS of the class (well you can, but it's extremely difficult and against practice) -- but you can change it for everything that is applied to that class now:

$('.example').css('background-color', 'blue');

What you can do however, is re-apply that CSS whenever a new element of your type is generated. For example, after calling an AJAX script that retrieves data from another file:

$('#blah').load('script.php', function() {
    $('.example').css('background-color', 'blue');
});

You can also have an interval that re-applies on all elements for you, but performance wise this is not recommended:

setInterval(function() {
    $('.example').css('background-color', 'blue');
}, 100);

My advice to you would be to find another way to mark your changes, like a second class and use that class to inflict the changes on your elements.