jQuery - Get and Set CSS Classes
jQuery Manipulating CSS
jQuery has several methods for CSS manipulation. We will look at the following methods:
addClass()- Adds one or more classes to the selected elementsremoveClass()- Removes one or more classes from the selected elementstoggleClass()- Toggles between adding/removing classes from the selected elementscss()- Sets or returns the style attribute
With jQuery, it is easy to manipulate the style of elements.
jQuery addClass() Method
The addClass() method adds one or more classes to the selected elements.
The following example adds class attributes to different elements:
Example
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Try it Yourself »
You can also specify multiple classes within the addClass() method:
jQuery removeClass() Method
The removeClass() method removes one or more
classes from the selected elements.
The following example removes a specific class from different elements:
jQuery toggleClass() Method
The toggleClass() method toggles between
adding/removing classes from the selected elements.
The following example uses the toggleClass() method
to toggle between adding/removing a class from the selected elements:
jQuery css() Method
The jQuery css() method will be explained in the next chapter.
jQuery Exercises
jQuery CSS Reference
For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.
