This content originally appeared on Go Make Things and was authored by Go Make Things
Yesterday, we looked at to add and remove a CSS class from multiple elements with the classList API. Today, we’re going to create some helper functions we can use to work with multiple classes on multiple elements.
Let’s dig in.
Creating a helper function
To get started, let’s create addClass() and removeClass() helper functions.
Each one will accept the elements to add or remove classes from, as well as or more classes to add or remove.
function addClass(elems, classes) {
// ...
}
function removeClass(elems, classes) {
// ...
}
While we could accept an array for the classes parameter, I think it would be more useful to let users pass in multiple classes as a comma-separated list, like this.
let p = document.querySelectorAll('p');
addClass(p, 'color-blue', 'text-large');
We can use rest parameters to get an array from whatever arguments are passed in beyond a certain point, like this.
function addClass(elems, ...classes) {
// ...
}
function removeClass(elems, ...classes) {
// ...
}
Now, the classes parameter will be an array of whatever classes are passed in.
Looping through the elements
Next, lets loop through the elems NodeList in our addClass() and removeClass() functions, and add or remove the classes, respectively.
We’ll use a for...of loop to loop through each element.
function addClass(elems, ...classes) {
// Add the .color-blue class
for (let elem of elems) {
elem.classList.add(classes);
}
}
function removeClass(elems, ...classes) {
for (let elem of elems) {
elem.classList.remove(classes);
}
}
Right now, classes is an array, but the classList API methods accept a comma-separated list of classes. We can use the spread syntax operator to convert our array of classes into a comma-separated list while passing it in.
function addClass(elems, ...classes) {
// Add the .color-blue class
for (let elem of elems) {
elem.classList.add(...classes);
}
}
function removeClass(elems, ...classes) {
for (let elem of elems) {
elem.classList.remove(...classes);
}
}
And with that, we’re done!
Here’s a demo you can play with.
❄️ Holiday Sale! Now through the New Year, save 40% on every pocket guide, video course, and enrollment in the Vanilla JS Academy. If you buy a pocket guide bundle or join Academy, you'll also get $436 in free bonus gifts.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-12-21T15:30:00+00:00) How to create vanilla JavaScript helper functions to add and remove classes from multiple elements. Retrieved from https://www.scien.cx/2021/12/21/how-to-create-vanilla-javascript-helper-functions-to-add-and-remove-classes-from-multiple-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.