jQuery Add and Remove CSS Classes

In this tutorial you will learn how to add or remove CSS classes using jQuery.

jQuery CSS Classes Manipulation

jQuery provides several methods, such as addClass() , removeClass() , toggleClass() , etc. to manipulate the CSS classes assigned to HTML elements.

jQuery addClass() Method

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

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Demo Text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Tip: Lorem Ipsum is dummy text.
 Add Class  

You can also add multiple classes to the elements at a time. Just specify the space separated list of classes within the addClass() method, like this:

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Hello World
 
The quick brown fox jumps over the lazy dog.
 Add Class  

jQuery removeClass() Method

Similarly, you can remove the classes from the elements using the jQuery removeClass() method. The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements.

The following example will remove the class .page-header from the and the class .hint and .highlight from the

elements on button click.

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Demo Text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Tip: Lorem Ipsum is dummy text.
 Remove Class  

When the removeClass() method is called without an argument it will remove all the classes from the selected elements. Here’s an example:

Example

     .page-header < color: red; text-transform: uppercase; >.highlight    
Demo Text
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
Tip: Lorem Ipsum is dummy text.
 Remove Class  

jQuery toggleClass() Method

The jQuery toggleClass() 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.

Example

     p < padding: 10px; cursor: pointer; font: bold 16px sans-serif; >.highlight    
Click on me to toggle highlighting.
 
Click on me to toggle highlighting.
 
Click on me to toggle highlighting.
  

You will learn about the CSS properties manipulation in next chapter »

Источник

jQuery — Get and Set CSS Classes

With jQuery, it is easy to manipulate the style 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;
>

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

You can also specify multiple classes within the addClass() method:

Example

jQuery removeClass() Method

The following example shows how to remove a specific class attribute from different elements:

Example

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

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.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

.addClass()

Description: Adds the specified class(es) to each element in the set of matched elements.

version added: 1.0 .addClass( className )

version added: 3.3 .addClass( classNames )

version added: 1.4 .addClass( function )

A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

version added: 3.3 .addClass( function )

A function returning one or more space-separated class names or an array of class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

It’s important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

Before jQuery version 1.12/2.2, the .addClass() method manipulated the className property of the selected elements, not the class attribute. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).

As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the class attribute is used instead. So, .addClass() can be used on XML or SVG documents.

More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

$( "p" ).addClass( "myClass yourClass" );

This method is often used with .removeClass() to switch elements’ classes from one to another, like so:

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

As of jQuery 1.4, the .addClass() method’s argument can receive a function.

$( "ul li" ).addClass(function( index ) 
 return "item-" + index;
>);

Examples:

Add the class "selected" to the matched elements.

Источник