Hidden Gems of HTML5: classList

If you are a web developer, you surely must know how handy it is to dynamically change the class attribute on an element. The benefits this technique are quite a few:

  • You leave any changes in the look and feel to the CSS
  • You avoid having to loop lots of elements as you can allow CSS to do that job for you by assigning a class on a parent element
  • You can trigger CSS transitions and avoid having to write your own animation
  • And many more…

The issue with classes is that it is not too simple to work with because of their representation in the DOM. When you read out className you get one string and you need to split it and use regex to find if a class was used and all kind of other annoyances. This is also why it is a very common interview questions for web developers to write a function to deal with classes.

Well, you might not be aware of it, but HTML has a very cool new way to deal with classes called classList. This makes it dead easy to add, remove, toggle and check for classes on an element – natively in your browser. You can play with it at JSFiddle:

The methods you have are all you really need:

  • element.classList.add('foo') adds the class foo to the element (if it already exists it does nothing)
  • element.classList.remove('foo') removes the class foo from the element
  • element.classList.toggle('foo') alternatively adds and removes the class foo from the element
  • element.classList.contains('foo') returns if the class is applied to the element or not
  • element.classList.toString() returns all the classes as a string (same as reading out className)

The browser support is very good with IE being the party pooper. However, there is a polyfill by Eli Grey available for you to use.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , ,

19 thoughts on “Hidden Gems of HTML5: classList

  1. Drew

    If this native method is faster than jQuery’s current methods, I’d expect they’d probably update the code to use it when available.

  2. Brian Birtles

    Apparently you can’t use angle brackets in posts here. That last comment should say that the modified classList doesn’t extend support to embed elements or iframe elements yet.

  3. Chris Heilmann

    Good for you, but jQuery is not a standard and needs to be loaded separately. Which is not always an option.

  4. louisremi

    The classList API is very nice indeed, but if you’re searching for a cross browser solution, here’s a 140bytes function: https://gist.github.com/1319121

    the API is:
    c( elem, “has”, name );
    c( elem, “add”, name );
    c( elem, “remove”, name );
    c( elem, “toggle”, name );

  5. Rob

    This is cool but the class tool I use most in jQuery is toggleClass with the second argument as a boolean.

  6. MT

    That was reply to Greg’s comment:
    hacks.mozilla.org/2012/01/hidden-gems-of-html5-classlist/comment-page-1/#comment-1328637

  7. MT

    We probably should have separate methods such as:

    — contains() for AND (would return true if element has all given tokens);

    — containsOne() for OR (would return true if element has any of given tokens).

  8. mig

    Using jQuery a lot, i find myself doing $(element).addClass(“foo bar”) or $(element).removeClass(“foo bar”) very often. This is a nice convenience.

  9. Joost Elfering

    This is a nice gem in the new HTML5 spec!

    Support seems to be okay but a fallback is naturally in order. Are there any performance figures for this compared to jQuery type solutions for this problem?

  10. Chris Heilmann

    It is part of the living HTML spec – and it is an HTML property. So it is HTML5. A lot of JavaScript is described in the spec.

  11. Chris Heilmann

    you mean add(‘foo’,’bar’) or add([‘foo’,’bar’]) ? What would be the use case of those?

  12. Calvein

    The biggest problem with this API is that you can’t use those methods on more than one class. That’s sad.

Leave a Reply