How do I add a class to a given element?

Question

I have an element that already has a class:

Answer 1

Add Class

• Cross Compatible

  In the following example we add a classname to the element. This is IE-8 compatible.

  var a = document.body;
  a.classList ? a.classList.add('classname') : a.className += ' classname';
  

  This is shorthand for the following..

  var a = document.body;
  if (a.classList) {
      a.classList.add('wait');
  } else {
      a.className += ' wait';
  }
  

---

• Performance

  If your more concerned with performance over cross-compatibility you can shorten it to the following which is 4% faster.

  var z = document.body;
  document.body.classList.add('wait');
  

---

• Convenience

  Alternatively you could use jQuery but the resulting performance is significantly slower. 94% slower according to jsPerf

  $('body').addClass('wait');
  

---

---

Removing the class

• Performance

  Using jQuery selectively is the best method for removing a class if your concerned with performance

  var a = document.body, c = ' classname';
  $(a).removeClass(c);
  

---

• Without jQuery it's 32% slower

  var a = document.body, c = ' classname';
  a.className = a.className.replace( c, '' );
  a.className = a.className + c;
  

---

References

1. jsPerf Test Case: Adding a Class
2. jsPerf Test Case: Removing a Class

---

Using Prototype

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

Using YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")