Is there a way to add remove several classes in one single instruction with classList

Question

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

User · Answer

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.

User · Answer

A very simple  non fancy  but working solution that I would have to believe is very cross browser   Create this function   x000D   x000D  function removeAddClasses classList removeCollection addCollection   x000D      for  var i 0 i lt removeCollection length i      x000D          classList remove removeCollection i     x000D        x000D      for  var i 0 i lt addCollection length i      x000D          classList add addCollection i     x000D        x000D    x000D   x000D   x000D    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

User · Answer

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  lt  length  i            this add array i             DOMTokenList prototype removeMany   function classes        var array   classes split           for  var i   0  length   array length  i  lt  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

User · Answer

Here is a work around for IE 10 and 11 users that seemed pretty straight forward   x000D   x000D  var elem   document getElementById  elem       first   second   third   forEach item   gt  elem classList add item    x000D   lt div id  elem  gt Hello World  lt  div gt  x000D   x000D   x000D   Or  x000D   x000D  var elem   document getElementById  elem        classes     first   second   third     classes forEach function item        return elem classList add item       x000D   lt div id  elem  gt Hello World  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

elem classList add  first    elem classList add  second    elem classList add  third      is equal  elem classList add  first   second   third

User · Answer

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

User · Answer

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

User · Answer

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  quot   quot

User · Answer

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  lt  arguments length  i          this add arguments i          DOMTokenList prototype removeMany   DOMTokenList prototype removeMany    function       for  var i   0  i  lt  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

User · Answer

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

User · Answer

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    gt  el classList toggle e        To add   class1    class2   map  e    gt  el classList add e        To remove   class1    class2   map  e    gt  el classList remove e      Good thing is you can extend the class array or use any coming from API easily

User · Answer

You can do like below  Add  elem classList add  first    second    third      Remove  elem classList remove  first    second    third      Reference  TLDR   In 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   gt      if  elem classList contains c          element classList remove c

User · Answer

The new spread operator makes it even easier to apply multiple CSS classes as array   const list     first    second    third    element classList add    list

User · Answer

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

[javascript] Is there a way to add/remove several classes in one single instruction with classList?

Examples related to javascript

Examples related to html