Back in the day, if you need to add, change, or remove a class on a HTML element, you’ll have had little choice but to use the className property:

el.className = 'foo';

if (el.className === 'foo') {
    el.className = 'bar';
}

http://jsfiddle.net/ianoxley/YFfud/

That was easy enough if an element had only one class applied to it, but things got trickier if you had multiple classes to contend with:

var allClasses = el.className.split(/\s/);
for (var i = 0, length = allClasses.length; i < length; i++) {
    if (allClasses[i] === 'foo') {
	    allClasses[i] = 'bar';
	    break;
    }
}

el.className = allClasses.join(' ');

http://jsfiddle.net/ianoxley/79TKR/

Along came a slew of JavaScript libraries in the mid-2000’s, with convenient methods for adding and removing classes:

// Using jQuery
var el = $('#element_id');
el.addClass('foo');

el.toggleClass('bar');

if (el.hasClass('foo')) {
    el.removeClass('foo');
}

http://jsfiddle.net/ianoxley/HnVCV/

Now, in 2013, the latest version of each browser, with the exception of Opera Mini, all have native support for adding, removing, toggling, and checking if an element has a class applied, via the classList.

classList returns a token list (specifically a DOMTokenList) of all the classes applied to an element. It exposes a length property, and four functions:

  • add - to add a class to the classList
  • remove - to remove a class from the classList
  • toggle - to add a class to the classList, or remove it if it’s already there
  • contains - to check if a class is in the classList

classList Example

<header id="main">...</header>
...
<script>
    var mainHeader = document.getElementById('main');
    if (mainHeader.classList.length === 0) {
	    mainHeader.classList.add('foo');
    }

    mainHeader.classList.toggle('bar');

    if (mainHeader.classList.contains('foo')) {
	    mainHeader.classList.remove('foo');
    }
</script> _[http://jsfiddle.net/ianoxley/FVjgq/](http://jsfiddle.net/ianoxley/FVjgq/)_

One of the benefits of using the native classList API is performance. I tested the code from the above examples and the native code was 83% faster than the jQuery equivalent:

jsperf.com results

Polyfills exist for older browsers that don’t support classList natively, so if you need to support older browsers you’ll have to judge whether they are a good fit for you, whether to write your own, or whether to fall back on your preferred JavaScript library.