You Are Here

jQuery CSS Classes

Using jQuery you can easily manipulate the style properties and CSS class of DOM elements.

jQuery CSS Classes Manipulation:

jQuery provides several methods to manipulate the CSS classes assigned to HTML elements.
Following are some methods:
  • addClass()
  • removeClass()
  • toggleClass()
  • css()

jQuery addClass() Method:

The addClass() method adds one or more classes to the selected elements.
In the following example  the class .header-text will be added to the header <h2> and the class .highlight-text will be added to the <p> element with class .demo on button click.

Example:

$(document).ready(function(){
$("button").click(function(){
$("h2").addClass("header-text");
$("p.demo").addClass("highlight-text");
});
});
Try it
You can also add multiple classes to the HTML elements at a time. You just have to specify the space-separated list of classes within the addClass() method, like this:

Example:

$(document).ready(function(){
$("button").click(function(){
$("h2").addClass("header-text highlight-text");
});
});
Try it

jQuery removeClass() Method:

You can also remove the classes from the elements using the jQuery removeClass() method. This method can remove a single class, multiple classes or all classes at once from the selected elements.
In the following example the class .header-text will be removed from the <h2> and the class .demo and .highlight-text from the <p> elements on button click.

Example:

$(document).ready(function(){
$("button").click(function(){
$("h2").removeClass("header-text");
$("p").removeClass("demo highlight-text");
});
});
Try it
If the removeClass() method is called without an argument it will remove all the classes from the selected elements.
Following is an example of this:

Example:

$(document).ready(function(){
$("button").click(function(){
$("h2").removeClass();
$("p").removeClass();
});
});
Try it

jQuery toggleClass() Method

The toggleClass() method is used to 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:

$(document).ready(function(){
$("p").click(function(){
$(this).toggleClass("highlight-text");
});
});
Try it
You will learn about the CSS properties manipulation in our jQuery style properties tutorial.

Ask a Question

Your email address will not be published. Required fields are marked *