How to Change Element's Class in JavaScript

Often you may need to change element’s class in your web page. There are several simple ways to do this. When changing an HTML element’s class, it is important to remember that it can have more than one class. So you need to be clear if you want to add/remove or replace the existing class of your element. In this article, we will learn how to change element’s class in JavaScript.

How to Change Element’s Class in JavaScript

We will look at how to change element’s class using both JavaScript as well as popular jQuery JS library. Since HTML elements can have more than 1 class, most modern web browsers like Chrome, Firefox and Edge support a classList to make it easy to work with class names. Let us say you have an HTML element with id=’MyElement’

Add Class Name

Here is how to add a new class name ‘MyClass’ to the element using add() function, called on classList property of the element.

document.getElementById("MyElement").classList.add('MyClass');

Here is how to add the same class using jQuery.

$('#MyElement').addClass('MyClass');

Remove Class Name

Here is how to remove class name MyClass for the element.

document.getElementById("MyElement").classList.remove('MyClass');

You can remove class names using jQuery’s removeClass() function.

$('#MyElement').removeClass('MyClass');

Replace Class Name

You can also completely overwrite an element’s existing classes with a new value, using .className property of the element.

document.getElementById("MyElement").className = "MyClass";

Please note, this will completely remove all existing class names of the element and replace it with the new value you have specified.

You can also use this property to add class names. Here is an example to add new class name to your element.

document.getElementById("MyElement").className += " MyClass1";

Check if Class Name Exists

Sometimes you may also need to check if a specific class name exists for an element. You can do so using the contains() function on classList property. Here is the code to check if your element has MyClass class name.

if ( document.getElementById("MyElement").classList.contains('MyClass') )

Similarly, you can do the same thing using jQuery also, using hasClass

if ( $('#MyElement').hasClass('MyClass') )

Toggle Class Name

Both JavaScript and jQuery also support toggling of class names, that is remove the class name if it exists, add the class name if it is absent.

//Using JavaScript
document.getElementById("MyElement").classList.toggle('MyClass');

//Using jQuery
$('#MyElement').toggleClass('MyClass');

In this article, we have learnt how to change element’s class name. We have also seen several different ways to change an element’s class name. Be clear about whether you want to add/remove or replace the class name of an element, since replacing the class name will wipe off all old class name values.

How to Change Element’s Class in JavaScript