Today this is a widely supported method in almost all of the browsers. It is a property on a DOM element and is read-only. A handy alternative to the className property.
The Syntax of the classList Object
The syntax is plain simple: we need an HTML element selected with JS and use one of the methods of the classList object.
We have six methods: add(), remove(), item(), toggle(), contains(), replace(). The names speak for themselves.
We can also access to the number of the classes with the object’s length property.
// Our HTML markup: <div class="main is-front-page"></div>
// Our JS code: let main = document.querySelector('.main'); main.classList.remove('is-front-page'); main.classList.add('is-sub-page');
// Our HTML result: <div class="main is-sub-page"></div>
To see the complete object, you can run and log the element.classList. Here you can see the numbered classes (in an accessible array format), the length and on the prototype chain the methods.
If you want to add a class to a selected or created item, apply the class names as parameters to the add() method.
// Add a new class to the ".main" element main.classList.add('has-sidebar');
// You can also add multiple classes separated with comma main.classList.add('has-sidebar', 'is-dark-style');
// Our HTML result: <div class="main is-sub-page has-sidebar is-dark-style"></div>
The good thing with these functions is that they don’t throw an error if something not right. What I mean is that if you add an existent class to an element, it won’t be added again. If you want to remove a non-existent attribute value, you neither get an error. It handles all of these quirks.
To remove a specified class, we have to use the remove() method with the chosen name(s). Here we can also remove more than one item.
// Remove has-sidebar class from element main main.classList.remove('has-sidebar');
// Our HTML result: <div class="main is-sub-page is-dark-style"></div>
Note that here we can also use the spread syntax:
let classes = ['is-sub-page', 'is-dark-style']; main.classList.remove(...classes );
The toggling method is a useful one because we don’t have to write any statement. If an element contains the chosen class it will remove it; if a component doesn’t include the named class, it will add it (we don’t need an if statement with the contains method).
This function serves as a shortcut in our code in a lot of cases because we don’t have to choose between adding or removing.
// Toggle the selected class main.classList.toggle('has-sidebar');
// Our HTML result: <div class="main has-sidebar"></div>
The function returns true if it adds the class and false if it removes it.
The toggle method has a second parameter which can control the two operations (adding, removing). If this second parameter is valid, it will add the class, if it evaluates to false it will remove it.
// Add/remove is-dark-style class, depending on colorScheme == 'dark' condition main.classList.toggle('is-dark-style', colorScheme == 'dark' );
Using the classList.replace() method we can replace an existing class with another; this is handy because it is a frequent pattern and we don’t have to use the remove() method before the add().
// Replace 'main' class with 'secondary' div.classList.replace('main', 'secondary');
// Our HTML result: <div class="secondary has-sidebar"></div>
Check If Element Contains Class
Checks if the named class exists on the selected element. We can use it’s return value in our if statements.
// Returns true main.classList.contains('has-sidebar');
Get the Nth Class of an Element
Using the classList object’s item() method, we can get a class value by index.
// Returns 'has-sidebar' main.classList.item(1);
Need a web developer? Maybe we can help, get in touch!