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:
addClass()
removeClass()
toggleClass()
css()
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:
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.
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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok