Native JavaScript provides a way to access and manipulate all of the CSS classes that are assigned to an HTML element.
The JavaScript element.classList object is an instance of the JavaScript DOMTokenList object. It exposes one property and a number of methods that allow you to work with CSS classes that are assigned to an HTML element.
While it has been supported for some time by all major browsers, Microsoft Internet Explorer has, unfortunately, ignored JavaScript’s element.classList object until very recently (what a big surprise). If you need to support IE9 and below (and of course you do), then all bets are off. Bummer. That said, this object is nonetheless a super-helpful feature that makes CSS class manipulation a snap.
But what about jQuery?
There is no doubt that the jQuery methods hasClass(), addClass(), removeClass() and toggleClass() are all fantastic, but there ain’t nothin’ goin’ on under the hood that you can’t do yourself. And what is under the hood is tedious stuff like this:
1 |
if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) |
This kind of code will soon join the ranks of the eight-track cassette and pagers. While that is the current reality of cross-browser CSS class list manipulation, the fact is that native JavaScript is always evolving, and as soon as Internet Explorer 10 becomes the IE standard, the JavaScript element.classList object will be yet another native JS tool to tuck into your belt.
The length Property
Even though the element.classList object is not an array, it is “array-like” in that it has a “length” property, and each CSS class name is represented by a numerically indexed property whose value is the name of that class (a string). This is super-helpful if you want to enumerate the classes that are members of this object. You could certainly grab an individual member’s value using bracket-notation: element.classList[0], a “for” loop, or the item() method, which is discussed next.
The JsFiddle link below demonstrates the classList object’s length property. The class “bar” is toggled when you click the element specified. On each click, the classList object’s length property is shown. Since a class is toggled, that length value changes with each click, which helps to demonstrate the dynamic nature of this property. Keep in mind that like any JavaScript array, the length property’s value will always be one higher than the index of the last element.
Here is the JsFiddle.net link for the classList object’s “length” property : http://jsfiddle.net/BmFZc/
The item() Method
The item() method allows you to reference a specific class name in the collection of class names. When you pass an integer to this method, it returns a string representation of the class name that matches that index. So keep in mind that this collection is zero-based. In the first JsFiddle link below, we manually reference a number of classes in the class list, using the item() method. In the second JsFiddle link below, we use a “for” loop to accomplish the same task.
Here is the JsFiddle.net link for the item() method: http://jsfiddle.net/N88x9/
Here is a second JsFiddle.net link for the item() method: http://jsfiddle.net/WE7gc/
The add() method
As you might expect, the add() method adds a class to the element’s class list. In the JsFiddle link below, you can see that the class “bar” is added to the element’s class list because the element’s appearance changes dramatically, as per the CSS that is specified.
Here is the JsFiddle.net link for the add() method: http://jsfiddle.net/uzMAx/
The remove() Method
In the manner opposite to the add() method, the remove() method removes the specified class from the element’s class list. Much like the example for the add() method, you can see that the class “bar” is removed from the element’s class list because the element’s appearance changes dramatically, as per the CSS that is specified.
Here is the JsFiddle.net link for the remove() method: http://jsfiddle.net/4h7m4/
The toggle() Method
The toggle() method will check to see if the element already has the specified class. If not, then it adds the class. If it does have the class, then it removes it. Depending on the scenario, this can minimize redundant code.
Here is the JsFiddle.net link for the toggle() method: http://jsfiddle.net/wWfNf/
The contains() Method
You can check to see if an element already has a class by using the contains() method. When you pass it a string name representing the class that you would like to check for, it returns true or false, indicating whether or not the element has the class you provided.
Here is the JsFiddle.net link for the contains() method: http://jsfiddle.net/wWfNf/
The toString() Method
The toString() Method simply returns a space-separated list of the classes that are applied to that element.
Here is the JsFiddle.net link for the toString() method: http://jsfiddle.net/GqzD5/
Summary
In this article we learned about JavaScript’s element.classList object. We demonstrated that while not exactly a JavaScript array, it is an “array-like” object with a length property, and some useful methods that allow you to work with the CSS classes that are assigned to an HTML element.
Helpful Links for the JavaScript element.classList object
https://developer.mozilla.org/en-US/docs/Web/API/element.classList
http://blog.alexanderdickson.com/manipulating-classes-with-javascript
http://tiffanybbrown.com/2011/08/15/class-manipulation-with-classlist/