With jQuery, it is easy to manipulate the CSS of elements.
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 elements
- removeClass() - Removes one or more classes from the selected elements
- toggleClass() - Toggles between adding/removing classes from the selected elements
- css() - Sets or returns the style attribute
Example Stylesheet
The following stylesheet will be used for all the examples on this page:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass() Method
The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:
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 following example shows how to remove a specific class attribute from different elements:
jQuery toggleClass() Method
The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:
jQuery css() Method
The jQuery css() method will be explained in the next chapter.
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
jQuery CSS Reference
For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.