How do I add a class to a given element?

Question

How do I add a class to a given element?

Question

I have an element that already has a class:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Now I want to create a JavaScript function that will add a class to the div (not replace, but add).

How can I do that?

Blankman

2020/08/18

Add Class

Cross Compatible

In the following example we add a classname to the <body> element. This is IE-8 compatible.

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';

This is shorthand for the following..

var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

Performance

If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4% faster.
```
var z = document.body;
document.body.classList.add('wait');
```

Convenience

Alternatively you could use jQuery but the resulting performance is significantly slower. 94% slower according to jsPerf
```
$('body').addClass('wait');
```

Removing the class

Performance

Using jQuery selectively is the best method for removing a class if your concerned with performance
```
var a = document.body, c = ' classname';
$(a).removeClass(c);
```

Without jQuery it's 32% slower

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

References

Using Prototype

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Using YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")

davidcondrey

2015/08/02

Another approach to add the class to element using pure JavaScript

For adding class:

document.getElementById("div1").classList.add("classToBeAdded");

For removing class:

document.getElementById("div1").classList.remove("classToBeRemoved");

Shoaib Chikate

2014/09/23

When the work I'm doing doesn't warrant using a library, I use these two functions:

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

meouw

2009/02/03

Assuming you're doing more than just adding this one class (eg, you've got asynchronous requests and so on going on as well), I'd recommend a library like Prototype or jQuery.

This will make just about everything you'll need to do (including this) very simple.

So let's say you've got jQuery on your page now, you could use code like this to add a class name to an element (on load, in this case):

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Check out the jQuery API browser for other stuff.

rfunduk

2009/02/03

Ishmael · Accepted Answer · 3/17/2020 9:19:08 AM

If you're only targeting modern browsers:

Use element.classList.add to add a class:

element.classList.add("my-class");

And element.classList.remove to remove a class:

element.classList.remove("my-class");

If you need to support Internet Explorer 9 or lower:

Add a space plus the name of your new class to the className property of the element. First, put an id on the element so you can easily get a reference.

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

Then

var d = document.getElementById("div1");
d.className += " otherclass";

Note the space before otherclass. It's important to include the space otherwise it compromises existing classes that come before it in the class list.