Use JQuery to Add Remove CSS classes

Overview

Here's our scenario, we don't have access to the source HTML but we have some new cool predefined CSS class we want to add to exisitng element(s).

So for example there's an existing DIV to which we want to add some predefined styling to, but rather than use CSS to have to add the new styling would like to be able to just add the class that contains our styling.

This is much tidier and has the advantage that if we do this over more than 1 element then any change to the one pre-defined CSS class is immediatley reflected to all elements using it.

JQuery has two function to help us out, .addClass and .removeClass

.addClass

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

.removeClass

This method is often used with . removeClass to switch elements classes from one to another like so...

reference : JQuery addClass