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

Try doing this...

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

Got this here...

This works:

myElement.className = 'foo bar baz';

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

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

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

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

Since I could not find this answer nowhere:

ES6 way (Modern Browsers)

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

Perhaps:

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

Not tested, but should work.

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.

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.

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

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>