How to 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?

To anyone reading this thread in 2020 or later, skip the old className method and use `element.classList.add("my-class")` instead. — Pikamander2, Jan 03 '20 at 04:33

score 2172 · Accepted Answer · edited Mar 17 '20 at 09:19

2172

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.

See also element.className on MDN.

edited Mar 17 '20 at 09:19

laurent

79,308
64
256
389

answered Feb 03 '09 at 13:58

Ishmael

25,799
4
35
49

28

If the only work on the whole page that needs to be done with JavaScript is this class name addition, then yes. But I can't see this being the only dynamic part of the page. A library will help with everything else as well. At 30-50kb jQuery is hardly a hit worth discussing. – rfunduk Feb 03 '09 at 14:59
182

"A library will help with everything else as well" - apart from learning JavaScript – meouw Feb 03 '09 at 15:24
20

What does adding a class to a DOM element have to do with learning the language? document.getElementById('div1').className is as much a library related issue as using jQuery to do the same is. The question was "how can I do that", a thoroughly tested library is the sensible answer. – rfunduk Feb 03 '09 at 20:06
9

@thenduks: I'm sure you know that JavaScript !== jQuery. It's a good thing that the answers to this question include library and non library solutions because it is important to know *how* things work not just the simplest way to accomplish them. You'll notice this question is tagged javascript – meouw Feb 03 '09 at 20:25
4

@meouw: I agree with you. jQuery is written _in_ JavaScript, however, so I maintain that mentioning to the OP that a library is a good idea is not 'pushing a framework down [his] throat'. That's all. – rfunduk Feb 04 '09 at 19:59
1

how to remove this class? is there any method to do this in javaScript,not with jQuery – Qadir Hussain Jul 15 '16 at 06:11
2

@QadirHussain: You have to parse the string manually and then assign it to className. – eltiare Oct 16 '16 at 01:55
1

how to do in javascript with multiple elements? – I Like Jan 24 '17 at 07:11
adding a class like so doesnt trigger transitions for me.. is this a known issue or? – Return-1 Jul 26 '17 at 14:51
1

It's important to note that using this method will add the class as many times as the line `d.className += " otherclass"` is called. That may or may not be the desired outcome. Check out the second most voted answer for adding a class only once. – belvederef Nov 02 '18 at 16:55
[The answer below](https://stackoverflow.com/a/14101453/4632019) show more elegant way to deal with `classList` – Eugen Konkov Dec 29 '18 at 15:08
I agree that @Yuri's answer should be the accepted answer. – Ishmael Jan 09 '19 at 18:20
And don't forget that leading space! ;) – Eric Soyke May 13 '19 at 15:10
Downvoted, not because it is a bad answer, but there is a better way nowadays using `element.classList.add` as discussed in [this answer](https://stackoverflow.com/a/14101453/286685) – Stijn de Witt Aug 14 '19 at 16:39
Unless your job requires it specifically, please don't support IE9 and lower :) – jave.web Feb 12 '20 at 01:55

score 1375 · Answer 2 · edited Sep 26 '17 at 10:32

1375

The easiest way to do this without any framework is to use element.classList.add method.

var element = document.getElementById("div1");
element.classList.add("otherclass");

Edit: And if you want to remove class from an element -

element.classList.remove("otherclass");

I prefer not having to add any empty space and duplicate entry handling myself (which is required when using the document.className approach). There are some browser limitations, but you can work around them using polyfills.

edited Sep 26 '17 at 10:32

Moazzam Khan

2,888
2
17
32

answered Dec 31 '12 at 12:12

Yuri

17,022
2
20
23

68

It's a shame that this isn't supported prior to IE 10.0 because it's an excellent feature and the easiest solution to an issue I come across often. – mricci Jan 14 '13 at 04:18
12

A polyfill for classList is available. – wcandillon Aug 04 '13 at 16:24
10

[element.classList docs](https://developer.mozilla.org/en-US/docs/Web/API/Element.classList) on MDN. – willlma Mar 26 '14 at 01:15
1

what about element.classList[length] = "otherclass"? – Aureliano Far Suau Jan 08 '15 at 18:05
11

This one seems to be the best one to use, as the ones with space at least feel like hacks - not ment for adding classes... – Silver Ringvee Dec 18 '15 at 07:26
5

@SilverRingvee A further risk of the space approach is that some other developer might not know it's vital, and remove it in order to clean things up. – akauppi Aug 03 '16 at 08:23
In what sense do you need to handle duplicates? In removal? You can use classList.remove(...) in that case, but you can still use className to add. – Michael Tontchev Mar 27 '17 at 04:09
This should be the accepted answer in 2019 and beyond. – Stijn de Witt Aug 14 '19 at 16:42
For multiple classes: `element.classList.add("one", "tow", ...);` – Nabi K.A.Z. Oct 17 '19 at 02:28
how can we do this with `getElementByClassName` – NomanJaved Dec 12 '19 at 06:21

score 182 · Answer 3 · edited Feb 26 '17 at 16:29

182

find your target element "d" however you wish and then:

d.className += ' additionalClass'; //note the space

you can wrap that in cleverer ways to check pre-existence, and check for space requirements etc..

edited Feb 26 '17 at 16:29

Cœur

32,421
21
173
232

answered Feb 03 '09 at 14:01

annakata

70,224
16
111
179

1

And to remove using this method? – DeathGrip Dec 22 '17 at 11:30
3

@DeathGrip simply set the class back to a single defined name d.className = 'originalClass'; – TheTechy Dec 26 '17 at 10:10
@TheTechy - if you have more than one class you need to keep (which happens a lot these days), that will not work. – Mark Schultheiss Apr 01 '19 at 10:51
1

To remove the old-fashioned way, `split` the classname on whitespace, remove the one you don't want from the resulting array, then `join` the array again... or use `element.classList.remove`. – Stijn de Witt Aug 14 '19 at 16:41

davidcondrey · Answer 4 · 2015-08-02T07:20:48.207

135

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")

edited Aug 02 '15 at 07:20

answered Dec 22 '14 at 23:29

davidcondrey

29,530
14
105
129

Wow thanks :) Will the shorthand version (`a.classList ? ...`) have any speed difference compared to the normal one (`if (a.classList) { ....`)? – Wilf Sep 06 '15 at 12:47
5

There's olso `classList.remove()`. Why didn't you used it? it's much faster than jQuery http://jsperf.com/remove-class-vanilla-vs-jquery – Fez Vrasta Jan 16 '16 at 16:44
@FezVrasta classList isn't supported before IE 10, which still has a decent market share (+13% on netmarketshare.com). – Adam Mar 18 '16 at 15:58
6

@Adam he used `classList` for everything except to remove classes, this is why I'm asking it. – Fez Vrasta Mar 18 '16 at 16:02
@FezVrasta Under **cross compatible** I did use .add() but only after checking to see if it is available, hense **cross compatible**. For remove I did not bother to repeat myself so I did not include as many options. – davidcondrey Sep 02 '16 at 10:49
Isn't `a.className = a.className + c;` adding the class back? I don't get it. – Iulian Onofrei Oct 08 '16 at 14:54
And [it looks like](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) `DOMTokenList` has a `remove` method too. – Iulian Onofrei Oct 08 '16 at 14:56

score 35 · Answer 5 · answered Sep 23 '14 at 11:15

35

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");

answered Sep 23 '14 at 11:15

Shoaib Chikate

7,697
11
41
67

5

That's already been answered several times by other users, including discussions of browser support and shims. – bafromca Sep 23 '14 at 16:10
@bafromca I didn't see that previous answer was given and its my mistake. You can flag this answer – Shoaib Chikate Sep 24 '14 at 06:00
4

@ShoaibChikate: you can also delete the answer if you'd like (you'll keep the points). Just trying to reduce clutter on this question; totally up to you. – Dan Dascalescu Jun 25 '15 at 08:55

score 24 · Answer 6 · answered Feb 03 '09 at 14:40

24

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;
}

answered Feb 03 '09 at 14:40

meouw

40,162
10
48
67

16

`if( cn.indexOf( classname ) != -1 ) { return; }` Beware that if you add the class “btn” with the class “btn-info” being already here, this fails. – Alexandre Dieulot Apr 17 '13 at 21:05
1

you should use `element.className.split(" ");` to prevent the problem @AlexandreDieulot reported here. – Amir Fo Aug 27 '18 at 08:37

score 22 · Answer 7 · answered Feb 03 '09 at 14:00

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.

score 18 · Answer 8 · answered Aug 10 '13 at 08:59

18

You can use the classList.add OR classList.remove method to add/remove a class from a element.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

The above code will add(and NOT replace) a class "anyclass" to nameElem. Similarly you can use classList.remove() method to remove a class.

nameElem.classList.remove("anyclss")

answered Aug 10 '13 at 08:59

sjv

205
2
6

very nice, but not supported in IE <= 9 or Safari <=5.0 ... :( (http://caniuse.com/classlist) – simon Sep 16 '13 at 04:46
1

This [has already been discussed](http://stackoverflow.com/a/14101453/1269037), including browser support. – Dan Dascalescu Jun 25 '15 at 08:57

score 12 · Answer 9 · answered Aug 20 '15 at 08:38

To add an additional class to an element:

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

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

To change all classes for an element:

To replace all existing classes with one or more new classes, set the className attribute:

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

(You can use a space-delimited list to apply multiple classes.)

score 8 · Answer 10 · answered Mar 31 '16 at 23:29

If you don't want to use jQuery and want to support older browsers:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

score 8 · Answer 11 · answered Dec 30 '17 at 17:46

I too think that the fastest way is to use Element.prototype.classList as in es5: document.querySelector(".my.super-class").classList.add('new-class') but in ie8 there is no such thing as Element.prototype.classList, anyway you can polyfill it with this snippet (fell free to edit and improve it):

if(Element.prototype.classList === void 0){
 function DOMTokenList(classes, self){
  typeof classes == "string" && (classes = classes.split(' '))
  while(this.length){
   Array.prototype.pop.apply(this);
  }
  Array.prototype.push.apply(this, classes);
  this.__self__ = this.__self__ || self
 }

 DOMTokenList.prototype.item = function (index){
  return this[index];
 }

 DOMTokenList.prototype.contains = function (myClass){
  for(var i = this.length - 1; i >= 0 ; i--){
   if(this[i] === myClass){
    return true;
   }
  }
  return false
 }

 DOMTokenList.prototype.add = function (newClass){
  if(this.contains(newClass)){
   return;
  }
  this.__self__.className += (this.__self__.className?" ":"")+newClass;
  DOMTokenList.call(this, this.__self__.className)
 }

 DOMTokenList.prototype.remove = function (oldClass){
  if(!this.contains(newClass)){
   return;
  }
  this[this.indexOf(oldClass)] = undefined
  this.__self__.className = this.join(' ').replace(/  +/, ' ')
  DOMTokenList.call(this, this.__self__.className)
 }

 DOMTokenList.prototype.toggle = function (aClass){
  this[this.contains(aClass)? 'remove' : 'add'](aClass)
  return this.contains(aClass);
 }

 DOMTokenList.prototype.replace = function (oldClass, newClass){
  this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
 }

 Object.defineProperty(Element.prototype, 'classList', {
  get: function() {
   return new DOMTokenList( this.className, this );
  },
  enumerable: false
 })
}

Marcos Fernandez Ramos · Answer 12 · 2015-03-17T16:08:52.070

To add, remove or check element classes in a simple way:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

score 6 · Answer 13 · edited Mar 24 '17 at 14:18

I know IE9 is shutdown officially and we can achieve it with element.classList as many told above but I just tried to learn how it works without classList with help of many answers above I could learn it.

Below code extends many answers above and improves them by avoiding adding duplicate classes.

function addClass(element,className){
  var classArray = className.split(' ');
  classArray.forEach(function (className) {
    if(!hasClass(element,className)){
      element.className += " "+className;
    }
  });            
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');

score 6 · Answer 14 · answered Sep 24 '17 at 15:44

You can use modern approach similar to jQuery

If you need to change only one element, first one that JS will find in DOM, you can use this:

document.querySelector('.someclass').className += " red";

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" only to first element in DOM</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

Keep in mind to leave one space before class name.

If you have multiple classes where you want to add new class, you can use it like this

document.querySelectorAll('.someclass').forEach(function(element) {
  element.className += " red";
});

.red {
  color: red;
}

<div class="someclass">
  <p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

<div class="someclass">
  <p>lorem ipsum</p>
</div>

how about to target the last class instead? – staminna Aug 14 '20 at 13:35 — staminna, Aug 14 '20 at 13:35

score 5 · Answer 15 · edited Jan 08 '17 at 09:55

I think it's better to use pure JavaScript, which we can run on the DOM of the Browser.

Here is the functional way to use it. I have used ES6 but feel free to use ES5 and function expression or function definition, whichever suits your JavaScript StyleGuide.

'use strict'

const oldAdd = (element, className) => {
  let classes = element.className.split(' ')
  if (classes.indexOf(className) < 0) {
    classes.push(className)
  }
  element.className = classes.join(' ')
}

const oldRemove = (element, className) => {
  let classes = element.className.split(' ')
  const idx = classes.indexOf(className)
  if (idx > -1) {
    classes.splice(idx, 1)
  }
  element.className = classes.join(' ')
}

const addClass = (element, className) => {
  if (element.classList) {
    element.classList.add(className)
  } else {
    oldAdd(element, className)
  }
}

const removeClass = (element, className) => {
  if (element.classList) {
    element.classList.remove(className)
  } else {
    oldRemove(element, className)
  }
}

score 5 · Answer 16 · answered Feb 03 '09 at 14:18

Just to elaborate on what others have said, multiple CSS classes are combined in a single string, delimited by spaces. Thus, if you wanted to hard-code it, it would simply look like this:

<div class="someClass otherClass yetAnotherClass">
      <img ... id="image1" name="image1" />
</div>

From there you can easily derive the javascript necessary to add a new class... just append a space followed by the new class to the element's className property. Knowing this, you can also write a function to remove a class later should the need arise.

Athira V Ajit · Answer 17 · 2020-11-18T13:43:18.120

4

document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

First approach helped in adding the class when second approach didn't work.
Don't forget to keep a space in front of the ' someclassname' in the first approach.

For removal you can use:

document.getElementById('some_id').classList.remove('someclassname')

edited Nov 18 '20 at 13:43

answered May 29 '20 at 06:31

Athira V Ajit

86
1
7

score 3 · Answer 18 · answered Jul 19 '15 at 16:31

Sample with pure JS. In first example we get our element's id and add e.g. 2 classes.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

In second example we get element's class name and add 1 more.

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

score 3 · Answer 19 · answered Jun 30 '17 at 07:21

For those using Lodash and wanting to update className string:

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

score 2 · Answer 20 · answered May 14 '20 at 11:20

2

Shortest

image1.parentNode.className+=' box';

image1.parentNode.className+=' box';

.box { width: 100px; height:100px; background: red; }

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

answered May 14 '20 at 11:20

Kamil Kiełczewski

53,729
20
259
241

score 1 · Answer 21 · answered Mar 06 '15 at 10:27

You can use the API querySelector to select your element and then create a function with the element and the new classname as parameters. Using classlist for modern browsers, else for IE8. Then you can call the function after an event.

 //select the dom element
 var addClassVar = document.querySelector('.someclass');

 //define the addclass function
 var addClass = function(el,className){
   if (el.classList){
     el.classList.add(className);
   }
   else {
     el.className += ' ' + className;
  }
};

//call the function
addClass(addClassVar, 'newClass');

This has [already been discussed](http://stackoverflow.com/a/14101453/1269037), along with browser support. — Dan Dascalescu, Jun 25 '15 at 08:59

score 0 · Answer 22 · answered Feb 03 '09 at 14:04

0

first, give the div an id. Then, call function appendClass:

<script language="javascript">
  function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAdd) == -1)
    {
      document.getElementById(elementId).setAttribute("class", classToAppend);
    }
}
</script>

answered Feb 03 '09 at 14:04

tehvan

9,341
5
25
31

1

it will replace the class not append ! Maybe be a line is missing or a oldClass+" "+classToAppend instead of the last classToAppend – Vinze Feb 03 '09 at 14:20
`indexOf` is a naive solution and has a [problem already pointed out](http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element#comment22937460_507329). – Dan Dascalescu Jun 25 '15 at 08:58

Jaime Montoya · Answer 23 · 2020-08-18T03:01:13.297

In my case, I had more than one class called main-wrapper in the DOM, but I only wanted to affect the parent main-wrapper. Using :first Selector (https://api.jquery.com/first-selector/), I could select the first matched DOM element. This was the solution for me:

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

I also did the same thing for the second children of a specific div in my DOM as you can see in the code where I used $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');.

NOTE: I used jQuery as you can see.

score -4 · Answer 24 · answered Jun 27 '14 at 14:48

This js code works for me

provides classname replacement

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

To add just use

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

To remove use

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

Hope this is helpful to sombody

score -9 · Answer 25 · answered Feb 03 '09 at 14:11

-9

In YUI, if you include yuidom, you can use

YAHOO.util.Dom.addClass('div1','className');

HTH

answered Feb 03 '09 at 14:11

Alagu

2,817
3
23
37

13

It said JavaScript, not jQuery or YUI. – Radek May 13 '13 at 15:07