Don’t like to read? Then watch our video!
I Have No Class
When you are working with HTML elements, the preferred method of adding stylings to the element is adding or removing classes from the “class” attribute (after, of course, defining them in your stylesheet). In olden days, you literally had to get the “className” property of the HTML element and make the changes on your own. Yuck.
But now there is an easier way. Each HTML element comes with a property called “classList”, which contains a DOMTokenList of all the classes associated with that element. And that DOMTokenList comes with a variety of methods to make adding or removing classes quick and easy. Let’s take a look at a few of the methods.
The Adding Machine
Adding a class to an element is as simple as calling … well … add(). Let’s take a look:
const zoo = document.getElementById('zoo'); zoo.classList.add('snake'); zoo.classList.add('snake', 'bear', 'gorilla');
And that’s it! Line 1 points to an HTML element in our document. Line 2 adds one class to the ‘zoo’ element, and Line 3 adds three classes to the element.
const zoo = document.getElementById('zoo'); const animals = ['snake, 'bear', 'gorilla'); zoo.classList.add('flamingo', ...animals);
Line 3 shows the destructuring assignment. Each element of the array “animals” will be used a a single argument passed to the add() method. It’s the same as saying this:
const zoo = document.getElementById('zoo'); zoo.classList.add('flamingo', 'snake', 'bear', 'gorilla');
Now you can place your classes in an array and add them automatically.
The Subtracting Machine
We can add. How about removal? That’s using the remove() method. Let’s look at some code:
const zoo = document.getElementById('zoo'); zoo.classList.remove('snake'); zoo.classList.remove('snake', 'bear', 'gorilla');
Looks familiar, right. The same type of arguments used for the add() method works here, too. If the class you specify doesn’t exists, then nothing happens.
And you can use the destructuring assignment here, too.
const zoo = document.getElementById('zoo'); const animals = ['snake, 'bear', 'gorilla'); zoo.classList.remove('flamingo', ...animals);
Many times you wish to simply add or remove a class based upon certain conditions – famously, if you want to ‘show’ or ‘hide’ an element. You can always detect if your class is there using the contains() method, then either add or subtract it based upon that condition.
But there is an easier way, using the toggle() method. Let’s take a look:
// zoo does NOT contain the 'bear' class. Trust me. const zoo = document.getElementById('zoo'); // after the below, zoo will contain 'bear' let bearAdded = zoo.classList.toggle('bear'); console.log(beadAdded); // after the below, zoo will not contain 'bear' bearAdded = zoo.classList.toggle('bear'); console.log(beadAdded); /* output: true false */
The toggle() method merely adds or removes the class from the element if it is already there or not – basically toggling the existence of that class. The value returned from the operation is a Boolean value on if the class is present on the classList or not, depending upon if it was added or removed.
And That’s Not All
As ‘classList’ is technially a “DOMTokenList”, there are a number of other functions you can perform with it, all because it is a ‘list’, like using iterations and what not. I suggest going to the Mozilla Developer Network docs on the subject and seeing what other fun things you can do.
We have a video on the subject above if you prefer to watch instead of read.
Check out everything at: https://www.thevirtuoid.com
Web Tinkerer. No, not like Tinkerbell.