300

So far I have to do this:

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

While this is doable in jQuery, like this

$(elem).addClass("first second third");

I'd like to know if there's any native way to add or remove.

16 Answers 16

601
elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

is equal

elem.classList.add("first","second","third");
7
  • 23
    And if you want to apply an Array of several class-names, you have to call: DOMTokenList.prototype.add.apply(elem.classList, ['first', 'second', 'third']); Feb 15, 2013 at 16:36
  • 9
    Firefox doesn't support it either, at the time of writing. My answer provides a polyfill.
    – Andy E
    Apr 26, 2014 at 21:23
  • 3
    Have you considered el.className += " my classes here" Mar 27, 2017 at 4:06
  • 3
    is there a way to remove multiple classes Feb 9, 2018 at 11:04
  • 7
    @Vicky elem.classList.remove("first","second","third"); Both add and remove methods are based on the same DOMTokenList. Jun 24, 2018 at 5:10
142

The new spread operator makes it even easier to apply multiple CSS classes as array:

const list = ['first', 'second', 'third'];
element.classList.add(...list);
3
  • 1
    The accepted answer works with a direct list of values, but this one works with arrays... both seem excellent answers! Jun 28, 2017 at 8:00
  • Can I use a DOMTokenList instead of an array? I know that a DOMTokenList is an array-like object. So it is possible to use it ith the classList.add() method or must the DOMTokenList be converted in a real array?
    – xela84
    Mar 21, 2019 at 12:32
  • such a know it all :)
    – AGrush
    Sep 7, 2022 at 8:55
52

You can do like below

Add

elem.classList.add("first", "second", "third");

// OR

elem.classList.add(...["first","second","third"]);

Remove

elem.classList.remove("first", "second", "third");

// OR

elem.classList.remove(...["first","second","third"]);

Reference

TLDR;

In the straight forward case above removal should work. But in case of removal, you should make sure class exists before you remove them

const classes = ["first","second","third"];
classes.forEach(c => {
  if (elem.classList.contains(c)) {
     element.classList.remove(c);
  }
})
1
  • 7
    You don't need to check the existence first. The docs say: "If the string is not in the list, no error is thrown, and nothing happens."
    – Besworks
    May 18, 2022 at 18:34
23

The classList property ensures that duplicate classes are not unnecessarily added to the element. In order to keep this functionality, if you dislike the longhand versions or jQuery version, I'd suggest adding an addMany function and removeMany to DOMTokenList (the type of classList):

DOMTokenList.prototype.addMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.add(array[i]);
    }
}

DOMTokenList.prototype.removeMany = function(classes) {
    var array = classes.split(' ');
    for (var i = 0, length = array.length; i < length; i++) {
      this.remove(array[i]);
    }
}

These would then be useable like so:

elem.classList.addMany("first second third");
elem.classList.removeMany("first third");

Update

As per your comments, if you wish to only write a custom method for these in the event they are not defined, try the following:

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function(classes) {...}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function(classes) {...}
1
  • Still a good answer. And I couldn't edit it for you as it was only 2 characters.
    – Pete
    Sep 18, 2013 at 16:14
20

Since the add() method from the classList just allows to pass separate arguments and not a single array, you need to invoque add() using apply. For the first argument you will need to pass the classList reference from the same DOM node and as a second argument the array of classes that you want to add:

element.classList.add.apply(
  element.classList,
  ['class-0', 'class-1', 'class-2']
);
1
14

Here is a work around for IE 10 and 11 users that seemed pretty straight forward.

var elem = document.getElementById('elem');

['first','second','third'].forEach(item => elem.classList.add(item));
<div id="elem">Hello World!</div>

Or

var elem = document.getElementById('elem'),
    classes = ['first','second','third'];

classes.forEach(function(item) {
    elem.classList.add(item);
});
<div id="elem">Hello World!</div>

2
  • 6
    Nice idea. I'd use .forEach() instead of .map() though – it's cleaner/more efficient for situations just like this where you're not using the returned array.
    – tenni
    Nov 19, 2018 at 1:50
  • Yes, that's true.
    – colecmc
    Nov 19, 2018 at 15:31
10

To add class to a element

document.querySelector(elem).className+=' first second third';

UPDATE:

Remove a class

document.querySelector(elem).className=document.querySelector(elem).className.split(class_to_be_removed).join(" ");
2
  • This is interesting to know, but all it does is to edit the string of the class. It wouldnt work if I wanted to remove several classes. Sorry, I forgot to add that in the OP. Jun 20, 2012 at 9:09
  • 5
    Do NOT use className. It is terrible for performance (even retrieving its value causes a reflow). Feb 4, 2016 at 18:53
7

Newer versions of the DOMTokenList spec allow for multiple arguments to add() and remove(), as well as a second argument to toggle() to force state.

At the time of writing, Chrome supports multiple arguments to add() and remove(), but none of the other browsers do. IE 10 and lower, Firefox 23 and lower, Chrome 23 and lower and other browsers do not support the second argument to toggle().

I wrote the following small polyfill to tide me over until support expands:

(function () {
    /*global DOMTokenList */
    var dummy  = document.createElement('div'),
        dtp    = DOMTokenList.prototype,
        toggle = dtp.toggle,
        add    = dtp.add,
        rem    = dtp.remove;

    dummy.classList.add('class1', 'class2');

    // Older versions of the HTMLElement.classList spec didn't allow multiple
    // arguments, easy to test for
    if (!dummy.classList.contains('class2')) {
        dtp.add    = function () {
            Array.prototype.forEach.call(arguments, add.bind(this));
        };
        dtp.remove = function () {
            Array.prototype.forEach.call(arguments, rem.bind(this));
        };
    }

    // Older versions of the spec didn't have a forcedState argument for
    // `toggle` either, test by checking the return value after forcing
    if (!dummy.classList.toggle('class1', true)) {
        dtp.toggle = function (cls, forcedState) {
            if (forcedState === undefined)
                return toggle.call(this, cls);

            (forcedState ? add : rem).call(this, cls);
            return !!forcedState;
        };
    }
})();

A modern browser with ES5 compliance and DOMTokenList are expected, but I'm using this polyfill in several specifically targeted environments, so it works great for me, but it might need tweaking for scripts that will run in legacy browser environments such as IE 8 and lower.

3
  • 2
    Nobody seems to mention that IE10 doesn't allow for multiple classes to be added. This worked nicely for me so thanks! I would caution though that in IE9 I get an error that DomTokenList is not defined. You may want to account for that too. Or only run this if( typeof DomTokenList !== 'undefined')
    – Ryan Ore
    Apr 2, 2015 at 13:49
  • @Ryan: thanks, I thought DOMTokenList was supported in IE 9 but I guess it was missed. I'll try and investigate a workaround at some point.
    – Andy E
    Apr 2, 2015 at 14:01
  • Looks like on a failed DOMTokenList you'd have to use className with word boundary regEx checks
    – Greg
    Nov 30, 2016 at 20:20
3

A very simple, non fancy, but working solution that I would have to believe is very cross browser:

Create this function

function removeAddClasses(classList,removeCollection,addCollection){
    for (var i=0;i<removeCollection.length;i++){ 
        classList.remove(removeCollection[i]); 
    }
    for (var i=0;i<addCollection.length;i++){ 
        classList.add(addCollection[i]); 
    }
}

Call it like this: removeAddClasses(node.classList,arrayToRemove,arrayToAdd);

...where arrayToRemove is an array of class names to remove: ['myClass1','myClass2'] etcetera

...and arrayToAdd is an array of class names to add: ['myClass3','myClass4'] etcetera

2

The standard definiton allows only for adding or deleting a single class. A couple of small wrapper functions can do what you ask :

function addClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  console.log (classes);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.add (classes[i][j]);
  }
}

function removeClasses (el, classes) {
  classes = Array.prototype.slice.call (arguments, 1);
  for (var i = classes.length; i--;) {
    classes[i] = classes[i].trim ().split (/\s*,\s*|\s+/);
    for (var j = classes[i].length; j--;)
      el.classList.remove (classes[i][j]);
  }
}

These wrappers allow you to specify the list of classes as separate arguments, as strings with space or comma separated items, or a combination. For an example see http://jsfiddle.net/jstoolsmith/eCqy7

2

Assume that you have an array of classes to being added, you can use ES6 spread syntax:

let classes = ['first', 'second', 'third']; elem.classList.add(...classes);

2

A better way to add the multiple classes separated by spaces in a string is using the Spread_syntax with the split:

element.classList.add(...classesStr.split(" "));
2

I found a very simple method which is more modern and elegant way.


const el = document.querySelector('.m-element');

// To toggle
['class1', 'class2'].map((e) => el.classList.toggle(e));

// To add
['class1', 'class2'].map((e) => el.classList.add(e));

// To remove
['class1', 'class2'].map((e) => el.classList.remove(e));

Good thing is you can extend the class array or use any coming from API easily.

0

I liked @rich.kelly's answer, but I wanted to use the same nomenclature as classList.add() (comma seperated strings), so a slight deviation.

DOMTokenList.prototype.addMany = DOMTokenList.prototype.addMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.add(arguments[i]);
  }
}
DOMTokenList.prototype.removeMany = DOMTokenList.prototype.removeMany || function() {
  for (var i = 0; i < arguments.length; i++) {
    this.remove(arguments[i]);
  }
}

So you can then use:

document.body.classList.addMany('class-one','class-two','class-three');

I need to test all browsers, but this worked for Chrome.
Should we be checking for something more specific than the existence of DOMTokenList.prototype.addMany? What exactly causes classList.add() to fail in IE11?

0

Another polyfill for element.classList is here. I found it via MDN.

I include that script and use element.classList.add("first","second","third") as it's intended.

0

One of the best solution is to check if an element exists and then proceed to add or possibly remove and above all if the element is empty, delete it.

/**
 * @description detect if obj is an element
 * @param {*} obj
 * @returns {Boolean}
 * @example
 * see below
 */
function isElement(obj) {
  if (typeof obj !== 'object') {
    return false
  }
  let prototypeStr, prototype
  do {
    prototype = Object.getPrototypeOf(obj)
    // to work in iframe
    prototypeStr = Object.prototype.toString.call(prototype)
    // '[object Document]' is used to detect document
    if (
      prototypeStr === '[object Element]' ||
      prototypeStr === '[object Document]'
    ) {
      return true
    }
    obj = prototype
    // null is the terminal of object
  } while (prototype !== null)
    return false
}

/*
 * Add multiple class
 * addClasses(element,['class1','class2','class3'])
 * el: element | document.querySelector(".mydiv");
 * classes: passing:: array or string : [] | 'cl1,cl2' | 'cl1 cl2' | 'cl1|cl2'
 */
function addClasses(el, classes) {
  classes = Array.prototype.slice.call(arguments, 1);
  if ( isElement(el) ){ //if (document.body.contains(el)
    for (var i = classes.length; i--;) {
      classes[i] = Array.isArray(classes[i]) ? classes[i]: classes[i].trim().split(/\s*,\s*|\s+/);
      for (var j = classes[i].length; j--;)
        el.classList.add(classes[i][j]);
    }
  }
}

/*
 * Remove multiple class
 * Remove attribute class is empty
 * addClasses(element,['class1','class2','class3'])
 * el: element | document.querySelector(".mydiv");
 * classes: passing:: array or string : [] | 'cl1,cl2' | 'cl1 cl2' | 'cl1|cl2'
 */
function removeClasses(el, classes) {
  classes = Array.prototype.slice.call(arguments, 1);
  if ( isElement(el) ) {
    for (var i = classes.length; i--;) {
      classes[i] = Array.isArray(classes[i]) ? classes[i]: classes[i].trim().split(/\s*,\s*|\s+/);
      for (var j = classes[i].length; j--;)
        el.classList.remove(classes[i][j]);
        let cl = el.className.trim();
        if (!cl){
          el.removeAttribute('class');
        }
    }
  }
}

var div = document.createElement("div");
div.id = 'test'; // div.setAttribute("id", "test");
div.textContent = 'The World';
//div.className = 'class';
// possible use: afterend, beforeend
document.body.insertAdjacentElement('beforeend', div); 

// Everything written above you can do so:
//document.body.insertAdjacentHTML('beforeend', '<div id="text"></div>');

var el = document.querySelector("#test");
addClasses(el,'one,two,three,four');
removeClasses(el,'two,two,never,other');
el.innerHTML = 'I found: '+el.className;
// return : I found: four three one
#test {
  display: inline-block;
  border: 1px solid silver;
  padding: 10px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.