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 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");
                  });

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:

Example

                  $("button").click(function(){
                  $("h1, h2, p").toggleClass("blue");
                  });