How to Change element Class Name using JavaScript

There are many ways you can change the class name of an element using JavaScript. The classList property in JavaScript is now commonly used. The classList property and its methods are available in new modern browsers. So, if you were looking for a cross browser solution, then I would recommend using the className property..

Change element class using classList Property

You can use the classList property to access and manipulate an element's classes. Let’s see an example.

I have an image on my web page with a class name defined. I'll change the class name of the <img> attribute dynamically using the classList property methods.

<!DOCTYPE html>
<html>
<head>
<title>Change element Class Name using classList Property</title>
<style>
    .defaultImage
    {
        width: 90px;
        border: none;
    }
    .smallImage
    {
        width: 50px;
        border: none;
    }
</style>
</head>
<body>
    <div>
        <img src='../../images/theme/javascript.png' class='defaultImage'>
    </div>
</body>
<script>
    window.addEventListener('click', function (e) {
        e.target.classList.add('smallImage');
    })
</script>
</html>

Try it

In the above example, I am using the addEventListener() method to capture the click event of the element.
I have used the classList property with target event property. You can use the classList property with .getElementById() method too.
For example, if the id of the image is js, the script would be,

document.getElementById('js').classList.add('smallImage');

Note: To remove an element’s class, use the remove() method of the classList property. For example,

e.target.classList.remove('class_name');

Also remember: The classList property is not supported in some older versions of IE.

Change element class using className Property

For cross browser solution, you can use the className property to change the class name of an element. This property works in older browsers like IE 9 and below.

The example here shows how easily you can toggle the image size by changing the class name by simply clicking the image.

<!DOCTYPE html>
<html>
<head>
<title>Change element Class Name using className Attribute</title>
<style>
    .defaultImage
    {
        width: 90px;
        border: none;
    }
    .smallImage 
    {
        width: 50px;
        border: none;
    }
</style>
</head>
<body>
    <div>
        <img src='../../images/theme/javascript.png' class='defaultImage'>
    </div>
</body>
<script>
    window.addEventListener('click', function (e) {
        if (e.target.className == 'defaultImage') {
            e.target.className = 'smallImage';
        }
        else {
            e.target.className = 'defaultImage';
        }
    })
</script>
</html>

Try it

I often use the className property, without any worries. You cannot always test your web pages using multiple browsers, especially the older versions.

Here again, you can use the className property with the getElementById() method. For example,

document.getElementById('js').className = 'smallImage';

Using className Property to change Multiple Class Name

You can use the += operator to add (or change) multiple class names of an element. For example,

if (e.target.className == 'defaultImage') {
    e.target.className = 'smallImage';      // change the default class name with another classname.
    e.target.className += ' rotate';    // add additional classname.
}

Try it

Look carefully where I have added the additional class name. There is a space before rotate class name. So, when you assign both the classes, it would look like this.

class="smallImage withBorder"

Change Element Class Name in the Click Event

You apply all the methods, which I have explained above, directly inside the click event of the element. Although, this is not advisable, there is no harm if you know this technique. For example,

← PreviousNext →