This content originally appeared on Go Make Things and was authored by Go Make Things
This week, my buddy Kieran Barker taught me that the Element.classList.toggle() method accepts a second argument that you can use to more efficiently write if...else class manipulation.
Today, I want to quickly review how that works. Let’s dig in!
The classList.toggle() method
The classList.toggle() method toggles a class on an element.
If the class already exists, the method removes it. If not, it adds it.
<p id="sandwich">Tuna</p>let sandwich = document.querySelector('#sandwich');
// This adds the .mayo class to the #sandwich element
sandwich.classList.toggle('mayo');
// This removes it
sandwich.classList.toggle('mayo');
The force parameter
The classList.toggle() method accepts a second argument, force.
If set to true, the method will only add the class, not remove it. If set to false, it will only remove the class, not add it.
For example, let’s say you wanted to add the .mayo class, but only if the .mustard class wasn’t already present. You might normally write that like this.
if (sandwich.classList.contains('mustard')) {
sandwich.classList.remove('mayo');
} else {
sandwich.classList.add('mayo');
}
With the force argument, you can instead do this.
let hasMayo = sandwich.classList.contains('mustard');
sandwich.classList.toggle('mayo', hasMayo);
Or, if you prefer one-liners, this.
sandwich.classList.toggle('mayo', sandwich.classList.contains('mustard'));
Kieran’s article goes a bit deeper into how you might use it, so go give it a read if you want to learn more.
⏰ Last Chance! A new session of the Vanilla JS Academy starts on Monday. Join today and get 25% off registration.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-07-14T14:30:00+00:00) The mysterious second argument on the vanilla JS classList.toggle() method. Retrieved from https://www.scien.cx/2022/07/14/the-mysterious-second-argument-on-the-vanilla-js-classlist-toggle-method/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.