jQuery - How to change an element's class tutorial

Here's how you can change an element's class using jQuery

Posted on May 11, 2021


When you need to add a class name to an element using jQuery, you can use the addClass() method.

The addClass() method can accept multiple class names as its parameter, separated by a space:

addClass("newClass otherClass"); 
// adds newClass and otherClass to all matching elements

The addClass() method can be used together with the removeClass() method so you can change elements’ classes from one another.

Here’s an example of changing a <div> element’s classes. You need to select the right element using jQuery selector $() method as follows:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>jQuery change class tutorial</h1>
  <div class="example">The first DIV element</div>
  <div class="example">The second DIV element</div>
  <script>
    $(".example").addClass("myClass").removeClass("example");
  </script>
</body>

In the example above, the two <div> elements’ classes will be changed from example to myClass.

You can also add and remove multiple classes at once:

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>jQuery change class tutorial</h1>
  <div class="example noClass">The first DIV element</div>
  <div class="example noClass">The second DIV element</div>
  <script>
    $(".example")
    .addClass("myClass otherClass")
    .removeClass("example noClass");
  </script>
</body>

Keep in mind that you don’t need to add any dot . to the class names you want to add or remove. Some people unintentionally add dots before the class name as follows:

$(".example")
.addClass(".myClass .otherClass")
.removeClass(".example .noClass");

While the addClass() method will work as intended, the removeClass() method will fail to remove the classes, but you won’t get any error message.

Related articles:

Level up your programming skills

I'm sending out an email once every Wednesday with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.