JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

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.

The following example will add the class .page-header to the <h1> and the class .highlight to the <p> elements with class .hint on button click.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery addClass() Demo</title>
  • <style type="text/css">
  •     .page-header{
  •         color: red;
  •         text-transform: uppercase;
  •     }
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         $("h1").addClass("page-header");
  •         $("p.hint").addClass("highlight");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <h1>Demo Text</h1>
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  •     <p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
  •     <button type="button">Add Class</button>
  • </body>
  • </html>

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:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery addClass() Demo</title>
  • <style type="text/css">
  •     .page-header{
  •         color: red;
  •         text-transform: uppercase;
  •     }
  •     .highlight{
  •         background: yellow;
  •     }         
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         $("h1").addClass("page-header highlight");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <h1>Hello World</h1>
  •     <p>The quick brown fox jumps over the lazy dog.</p>
  •     <button type="button">Add Class</button>
  • </body>
  • </html>

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 <h1> and the class .hint and .highlight from the <p> elements on button click.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery removeClass() Demo</title>
  • <style type="text/css">
  •     .page-header{
  •         color: red;
  •         text-transform: uppercase;
  •     }
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         $("h1").removeClass("page-header");
  •         $("p").removeClass("hint highlight");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <h1 class="page-header">Demo Text</h1>
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  •     <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
  •     <button type="button">Remove Class</button>
  • </body>
  • </html>

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

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery removeClass() Demo</title>
  • <style type="text/css">
  •     .page-header{
  •         color: red;
  •         text-transform: uppercase;
  •     }
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         $("h1").removeClass();
  •         $("p").removeClass();
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <h1 class="page-header">Demo Text</h1>
  •     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  •     <p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
  •     <button type="button">Remove Class</button>
  • </body>
  • </html>

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.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery toggleClass() Demo</title>
  • <style type="text/css">
  •     p{
  •         padding: 10px;
  •         cursor: pointer;        
  •         font: bold 16px sans-serif;
  •     }
  •     .highlight{
  •         background: yellow;
  •     }         
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("p").click(function(){
  •         $(this).toggleClass("highlight");
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <p>Click on me to toggle highlighting.</p>
  •     <p class="highlight">Click on me to toggle highlighting.</p>
  •     <p>Click on me to toggle highlighting.</p>
  • </body>
  • </html>

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

Your Feedback:

We would love to hear from you, please drop us a line.