jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery - Get and Set CSS Classes

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery provides methods to manipulate the style of elements in efficient way.

In this chapter we will explain how to add or remove CSS classes from the DOM.


jQuery Manipulating CSS

With jQuery we can easily manipulation the style of elements.

We have the following jQuery methods that are used for CSS manipulation:

The following section will show you how to use each method.


jQuery addClass() Method

The jQuery addClass() method adds one or more class names to the selected elements.

The following example adds a class name to the first <p> element:

Run code

More than one class can be added at a time, separated by a space, to the selected elements, like so:

Run code

jQuery removeClass() Method

The jQuery removeClass() method removes one or more class names from selected elements.

The following example removes a class name from all <p> element:

Run code

More than one class can be removed at a time, separated by a space, from the set of selected elements, like so:

Run code

If no class names are specified in the parameter, all classes will be removed:

Run code

jQuery toggleClass() Method

The jQuery toggleClass() method toggles between adding/removing one or more class names from the selected elements.

The following example toggles between adding and removing the "anotherClass" class name for all <p> elements:

Run code

This method checks each element for the specified class names:

  • The class names are added if missing
  • The class names are removed if already set

jQuery css() Method

The jQuery css() method gets or sets one or more style properties for the selected elements.

The jQuery css() method will be explained in the next chapter.


jQuery CSS Reference

For a complete CSS methods reference, visit our jQuery HTML/CSS Reference.