Using jQuery you can easily manipulate the style properties and CSS class of DOM elements.
jQuery CSS Classes Manipulation:
jQuery provides several methods to manipulate the CSS classes assigned to HTML elements.
Following are some methods:
jQuery addClass() Method:
The addClass() method adds one or more classes to the selected elements.
In the following example the class .header-text will be added to the header <h2> and the class .highlight-text will be added to the <p> element with class .demo on button click.
You can also add multiple classes to the HTML elements at a time. You just have to specify the space-separated list of classes within the addClass() method, like this:
jQuery removeClass() Method:
You can also remove the classes from the elements using the jQuery removeClass() method. This method can remove a single class, multiple classes or all classes at once from the selected elements.
In the following example the class .header-text will be removed from the <h2> and the class .demo and .highlight-text from the <p> elements on button click.
If the removeClass() method is called without an argument it will remove all the classes from the selected elements.
Following is an example of this:
jQuery toggleClass() Method
The toggleClass() method is used to add or remove one or more classes from the selected elements in such a way that if the selected element already has the class, then it is removed, if an element does not have the class, then it is added i.e., toggle classes.