Using the HTML5 classList API
Recently while i was working on a dashboard widget, I planned not to use any JavaScript library but just plain ol’ vanilla JavaScript. At one point I had to check if an element was shown or not. This was controlled using a CSS class and all that the basic API had returned a string of the classes of an element and one had to control it using string manipulation. Having read stuff about the classList API sometime in the past, I decided to have a look.
What is this classList API
As the name suggests it returns a list of all the classes of an element. For example
The API
With the list comes a very nice list of API methods. Most interesting of them are
- add() - adds a classs
- remove() - removes a class
- contains() - returns if a class exists
- toggle() - toggles a class (good for adding/removing hidden class)
Well, that’s just to introduce the API and for me to check in case it doesn’t catch up and I forget about it. Its a pretty simple API but makes life way easier if you’re using plain JS.