classList property on an HTML element provides all we need to count classes on that element, add or remove them, toggle classes on and off, and swap classes for one another. Calling
Element.classList will return a read-only list of the element's class attributes. Like an array, we can count the number of classes present with
// First we need to grab an HTML element const myElement = document.getElementById('my-element'); // Then count how many classes attributes it has console.log(myElement.classList.length);
Element.classList is read-only, it still provides several methods that we can use to manipulate its value. We can call
.add() to add a class to the element.
// Add a class called 'my-class' to the element myElement.classList.add('my-class');
We can call
.remove() to remove a class from the element if it's present. If the class we name isn't there, that's okay.
// Check for a class called 'my-class' and remove it myElement.classList.remove('my-class');
If we want to add or remove multiple classes as once, we can achieve this in two different ways. If all our class names are individual strings, we can just feed them as arguments into
classList.remove(). If are class names are compiled in an array, we can use the spread syntax to pass the array in as a single argument.
// Remove a couple individual classes by name myElement.classList.remove('my-class', 'your-class'); // Alternatively, start with an array of class names const classes = ['her-class', 'his-class', 'their-class']; // Use the spread syntax in this case // To use it, put three periods ... before the array name // Now we can add every class in the array to the element myElement.classList.add(...classes);
We can also call
.toggle() and name a class to add it if it's not already on the element, and remove it if it was already on the element.
// Toggle on a class named 'my-class' myElement.classList.toggle('my-class'); // Toggle 'my-class' right off again myElement.classList.toggle('my-class');
We can customize
classList.toggle() by adding a second argument after the class name. This argument should be a conditional test that will evaluate to either true or false. If the result is true, the designated class will be added; if the result is false, the designated class will be removed.
// Declare an integer to use in our conditional test let myInt = 0; // Toggle class on if the integer is greater than or // equal to 0 myElement.classList.toggle('my-class', myInt >= 0); // We can change our integer to change the result of our // conditional test myInt = -1; // The same toggle line now toggles our class off myElement.classList.toggle('my-class', myInt >= 0);
We can choose one class to replace with another class. Just pass the classes as two arguments to
classList.replace(). First pass the class to swap out, then pass the class to swap in.
// Replace 'my-class' with 'your-class' myElement.classList.replace('my-class', 'your-class');
Without a doubt,
classList is probably preferable, however there is another way to access the class attributes on an element. You can also achieve this using
Element.className. This property will return a string with the names of all classes on the element, separated with spaces. It's what you'd see if you looked at the element's HTML: one string--potentially with multiple class names--set to the element's
Now that we've delved into the capabilities of
Element.classList, try everything out and see if you can find some useful applications for these little techniques. You might use
classList.toggle() to show and hide a menu using CSS classes. You might highlight a selected option in a list of options by using
classList.remove() on each option. You might let users change themes on your site by calling
classList.replace() as they select the next theme.