O'Reilly

HTML5 classList API

By on  

Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within the browser? I realize that standards are important and browser vendors can't afford to half-ass these implementations but I do believe they could be...expedited.  The good news is that one of these functionalities has been add to the HTML5 API; classList.

The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node.  classList also allows developers to check if a CSS class has been assigned to a given node.

Element.classList

The classList object contains a number of helpful methods:

{
	length: {number}, /* # of class on this element */
	add: function() { [native code] },
	contains: function() { [native code] },
	item: function() { [native code] }, /* by index */
	remove: function() { [native code] },
	toggle: function() { [native code] }
}

Element.classList, as you can see, is a small but useful collection of methods.

Adding a CSS Class

The add method allows you to add one more multiple space-separated classes:

myDiv.classList.add('myCssClass');

Removing a CSS Class

The add method allows you to remove a single class:

myDiv.classList.remove('myCssClass');

You could separate multiple classes by space but the result may not be incredibly reliable.

Toggling a CSS Class

myDiv.classList.toggle('myCssClass'); //now it's added
myDiv.classList.toggle('myCssClass'); //now it's removed

Note: If toggle is called and the element does not have the provided CSS class, the class is added.

Contains CSS Class Check

myDiv.classList.contains('myCssClass'); //returns true or false

The classList API is now supported by all modern browsers, so look for the JavaScript libraries to include classList checks instead of parsing an element's class attribute!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API,...

Incredible Demos

  • Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

  • WebKit-Specific Style:  -webkit-appearance

    I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I'm Feeling Lucky" buttons had a style definition I hadn't seen before:  -webkit-appearance.  The value assigned to the style was "push-button."  They are buttons so that...

Discussion

  1. I feel it’s going to be a standard that won’t be implemented for a long time to come across all vendors, but it is certainly worth the wait. And at least we have libraries to fall back on for the moment.

    Just wish that there was one JavaScript engine and all used it. Only in a perfect world I guess, and that would also apply for CSS(3) etc.

  2. @Alex Hall: I hope that’s not the case — seems *very* easy to implement.

  3. Aubrey

    @Alex Hall:
    I wish there was one browser and all used it. That’d be bliss! :)

    • The last time there was one browser that everyone used we were left with years of stagnation. Perhaps you’ve forgotten about IE6?

  4. Jani Peltoniemi

    It’s a step forward, but I prefer Mootools’ Element.addClass over Element.classList.add

  5. @Jani Peltoniemi: I do too, but MooTools could (and probably will, once more browsers implement classList) use these native methods to more quickly add/remove/toggle classes.

  6. very good! Has now come true?

  7. Feature test for HTML5 classList:

    if (!!document.createElement('p').classList) {
     // native classList support
    };
    • mathias, the more ‘accepted’ way to test for such properties is:

      'classList' in document.createElement('p')

      This way also properties that are 0 or false or empty string or null are found. (In this case it doesn’t matter because the classList object never evaluates to false, but still…)

  8. That’s good stuff, but hmm chaining seems not working (FF4):

    element.classList.add("added-class").remove("removed-class");
    

    does not work :/

    If there is room for improvement, I wish toggle, remove and add would be available for chaining. What you guys think?

  9. Supported browsers includes Firefox and Google Chrome. Maybe Safari too? I am not sure about that…
    Thanks for the great article!

  10. With all these modern API implementations, programming JavaScript will be boring soon ;)

  11. Maybe I’m just missing it…but there’s no timestamps for the blog post or comments? I’m sure there’s an editorial aesthetic behind it, but it makes it hard to evaluate statements such as “Mozilla Firefox is the only browser that currently supports the classList API.”

    I only take the time to complain because the post overall is an excellent reference :)

  12. Kyle A. Matheny

    Just an update:
    All modern browsers now support classList. IE is lacking, as usual.

    http://caniuse.com/#search=classList

    • IE10+ supports classList.

    • FYI IE11 doesn’t support the optional 2nd add/remove param to classList.toggle.

  13. 645268865

  14. Woohoo. I just used this on a live project. We’re finally getting somewhere :))

  15. I’m having a problem with the classList in the following situation.

    I want to user querySelectorAll() to give all the elements an specific class. But that doesn’t work. Even when i use an for loop.

    Do you know how to do it? Would be great if you can point me in the right direction! :-)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...