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?

Answer 1

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

Answer 2

This works:

myElement.className = 'foo bar baz';

Answer 3

Perhaps:

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

Not tested, but should work.

Answer 4

Try doing this...

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

Got this here...

Answer 5

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.