JavaScript CSS how to add and remove multiple CSS classes to an element

Question

How can assign multiple css classes to an html element through javascript without using any libraries?

I see by the answers there is some confusion here. Do you want to be able to apply a constant set of multiple classes to an element, or do you want to be able to add more classes to an element that it originally has? — ProfK, Jan 01 '10 at 14:28

ericsoco · Answer 1 · 2016-03-20T18:52:56.017

Here's a simpler method to add multiple classes via classList (supported by all modern browsers, as noted in other answers here):

div.classList.add('foo', 'bar'); // add multiple classes

From: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Examples

If you have an array of class names to add to an element, you can use the ES6 spread operator to pass them all into classList.add() via this one-liner:

let classesToAdd = [ 'foo', 'bar', 'baz' ];
div.classList.add(...classesToAdd);

Note that not all browsers support ES6 natively yet, so as with any other ES6 answer you'll probably want to use a transpiler like Babel, or just stick with ES5 and use a solution like @LayZee's above.

score 85 · Accepted Answer · edited May 23 '17 at 12:34

85

Try doing this...

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

Got this here...

edited May 23 '17 at 12:34

Community

1
1

answered Jan 01 '10 at 12:58

Ryan

6,756
13
49
68

24

You only need to separate each class name with a space: object.className = `"class1 class2 class3 "` – Roy Hinkley May 27 '15 at 13:18

score 44 · Answer 3 · answered Jan 01 '10 at 12:55

44

This works:

myElement.className = 'foo bar baz';

answered Jan 01 '10 at 12:55

moff

6,415
31
30

9

thats not good because you lose the classes that are already there if you want to keep them. – Herman Van Der Blom May 04 '20 at 13:07

score 33 · Answer 4 · answered Jul 26 '19 at 17:28

There are at least a few different ways:

var buttonTop = document.getElementById("buttonTop");

buttonTop.className = "myElement myButton myStyle";

buttonTop.className = "myElement";

buttonTop.className += " myButton myStyle";

buttonTop.classList.add("myElement");

buttonTop.classList.add("myButton", "myStyle");

buttonTop.setAttribute("class", "myElement");

buttonTop.setAttribute("class", buttonTop.getAttribute("class") + " myButton myStyle");

buttonTop.classList.remove("myElement", "myButton", "myStyle");

Offering examples is good, but it would be helpful if you could explain which use cases call for which of those ways. Without that we're sort of just lost in the outback. — Mentalist, Jul 30 '19 at 01:10

score 15 · Answer 5 · edited Oct 21 '15 at 00:50

15

var el = document.getElementsByClassName('myclass')

el[0].classList.add('newclass');

el[0].classList.remove('newclass');

To find whether the class exists or not, use:

el[0].classList.contains('newclass'); // this will return true or false

Browser support IE8+

edited Oct 21 '15 at 00:50

m69's been on strike for years

11,835
3
34
57

answered Jun 19 '15 at 01:12

Mano bharathi

171
1
5

score 10 · Answer 6 · answered Mar 01 '19 at 11:42

You can add and remove multiple classes in same way with different in-built methods:

const myElem = document.getElementById('element-id');
//add multiple classes
myElem.classList.add('class-one', 'class-two', 'class-three');
//remove multiple classes
myElem.classList.remove('class-one', 'class-two', 'class-three');

James Ikubi · Answer 7 · 2021-01-28T13:48:09.673

10

2 great ways to ADD:

But the first way is more cleaner, since for the second you have to add a space at the beginning. This is to avoid the class name from joining with the previous class.

element.classList.add("d-flex", "align-items-center");
element.className += " d-flex align-items-center";

Then to REMOVE use the cleaner way, by use of classList

element.classList.remove("d-grid", "bg-danger");

edited Jan 28 '21 at 13:48

answered Jan 20 '21 at 12:07

James Ikubi

2,552
25
18

Tor Valamo · Answer 8 · 2010-01-01T13:02:02.783

8

guaranteed to work on new browsers. the old className way may not, since it's deprecated.

<element class="oneclass" />

element.setAttribute('class', element.getAttribute('class') + ' another');
alert(element.getAttribute('class')); // oneclass another

edited Jan 01 '10 at 13:02

answered Jan 01 '10 at 12:55

Tor Valamo

33,261
11
73
81

score 8 · Answer 9 · answered Jul 11 '18 at 08:46

8

Since I could not find this answer nowhere:

ES6 way (Modern Browsers)

el.classList.add("foo", "bar", "baz");

answered Jul 11 '18 at 08:46

Lemures

474
5
11

score 3 · Answer 10 · edited Jul 05 '13 at 20:45

3

just use this

element.getAttributeNode("class").value += " antherClass";

take care about Space to avoid mix old class with new class

edited Jul 05 '13 at 20:45

Pranav Singh

17,079
30
77
104

answered Jul 05 '13 at 20:20

Maged Rawash

43
1
8

score 2 · Answer 11 · answered Jan 01 '10 at 12:55

2

Perhaps:

document.getElementById("myEle").className = "class1 class2";

Not tested, but should work.

answered Jan 01 '10 at 12:55

tarnfeld

25,992
41
111
146

I think this might remove the other classes on the element, if there are any – Marc Sloth Eastman Jan 28 '20 at 14:58

score 2 · Answer 12 · answered Dec 30 '20 at 12:38

the Element.className += " MyClass"; is not recommended approach because it will always add these classes whether they were exit or not.

in my case, I was uploading an image file and adding classes to it, now with this each time you upload an image it will add these class whether they exist or not,

the recommended way is Element.classList.add("class1" , "class2" , "class3"); this way will not add extra classes if they already there.

score 1 · Answer 13 · answered Jan 02 '10 at 07:21

Try this:

function addClass(element, value) {
  if(!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

Similar logic could be used to make a removeClass function.

Lars Gyrup Brink Nielsen · Answer 14 · 2015-12-29T23:45:04.537

In modern browsers, the classList API is supported.

This allows for a (vanilla) JavaScript function like this:

var addClasses;

addClasses = function (selector, classArray) {
    'use strict';

    var className, element, elements, i, j, lengthI, lengthJ;

    elements = document.querySelectorAll(selector);

    // Loop through the elements
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) {
        element = elements[i];

        // Loop through the array of classes to add one class at a time
        for (j = 0, lengthJ = classArray.length; j < lengthJ; j += 1) {
            className = classArray[j];

            element.classList.add(className);
        }
    }
};

Modern browsers (not IE) support passing multiple arguments to the classList::add function, which would remove the need for the nested loop, simplifying the function a bit:

var addClasses;

addClasses = function (selector, classArray) {
    'use strict';

    var classList, className, element, elements, i, j, lengthI, lengthJ;

    elements = document.querySelectorAll(selector);

    // Loop through the elements
    for (i = 0, lengthI = elements.length; i < lengthI; i += 1) {
        element = elements[i];
        classList = element.classList;

        // Pass the array of classes as multiple arguments to classList::add
        classList.add.apply(classList, classArray);
    }
};

Usage

addClasses('.button', ['large', 'primary']);

Functional version

var addClassesToElement, addClassesToSelection;

addClassesToElement = function (element, classArray) {
    'use strict';

    classArray.forEach(function (className) {
       element.classList.add(className);
    });
};

addClassesToSelection = function (selector, classArray) {
    'use strict';

    // Use Array::forEach on NodeList to iterate over results.
    // Okay, since we’re not trying to modify the NodeList.
    Array.prototype.forEach.call(document.querySelectorAll(selector), function (element) {
        addClassesToElement(element, classArray)
    });
};

// Usage
addClassesToSelection('.button', ['button', 'button--primary', 'button--large'])

The classList::add function will prevent multiple instances of the same CSS class as opposed to some of the previous answers.

Resources on the classList API:

score 1 · Answer 15 · answered Apr 06 '23 at 19:28

Css classes can be added or removed from DOM elements using the classList property that contains the add or remove functions e.g

Add Css Classes

//you can add multiple classes

 element.classList.add("a", "b", "c");

Remove Css Classes

//you can remove multiple classes

  element.classList.remove("a", "b", "c");

score 0 · Answer 16 · answered Mar 23 '17 at 07:11

Maybe this will help you learn:

//<![CDATA[
/* external.js */
var doc, bod, htm, C, E, addClassName, removeClassName; // for use onload elsewhere
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
addClassName = function(element, className){
  var rx = new RegExp('^(.+\s)*'+className+'(\s.+)*$');
  if(!element.className.match(rx)){
    element.className += ' '+className;
  }
  return element.className;
}
removeClassName = function(element, className){
  element.className = element.className.replace(new RegExp('\s?'+className), '');
  return element.className;
}
var out = E('output'), mn = doc.getElementsByClassName('main')[0];
out.innerHTML = addClassName(mn, 'wow');
out.innerHTML = addClassName(mn, 'cool');
out.innerHTML = addClassName(mn, 'it works');
out.innerHTML = removeClassName(mn, 'wow');
out.innerHTML = removeClassName(mn, 'main');

}); // close load
//]]>

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:980px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='output'></div>
  </div>
</body>
</html>

score 0 · Answer 17 · answered Oct 24 '20 at 21:48

  addClass(element, className1, className2){
    element.classList.add(className1, className2);
  }
  removeClass(element, className1, className2) {
    element.classList.remove(className1, className2);
  }

removeClass(myElement, 'myClass1', 'myClass2');
addClass(myElement, 'myClass1', 'myClass2');

score 0 · Answer 18 · answered Dec 21 '20 at 11:46

ClassList add

var dynamic=document.getElementById("dynamic");
dynamic.classList.add("red");
dynamic.classList.add("size");
dynamic.classList.add("bold");

.red{
color:red;
}
.size{
font-size:40px;
}
.bold{
font-weight:800;
}

<div id="dynamic">dynamic css</div>

score 0 · Answer 19 · edited Jun 25 '23 at 18:17

0

By using classname property you can add multiple classes by passing all the classes as a string separated by space. This is more convenient way to do so

newLi.className= "list-group-item d-flex justify-content-between";

edited Jun 25 '23 at 18:17

Sagar Darekar

982
9
14

answered Jun 23 '23 at 16:31

Abhinav Nair

1

JavaScript CSS how to add and remove multiple CSS classes to an element

19 Answers19

Linked