JavaScript: Add/remove a single class on multiple elements

Question

How can I add/remove a single class on multiple class-selected elements.

In my setup I have some variables cached for doesn't stuff to each:

var classOne    = document.querySelector(".class1");
var classTwo    = document.querySelector(".class2");
var classThree  = document.querySelector(".class3");
var classFour   = document.querySelector(".class4");

but I'm also trying to do something like this:

var allClasses = [classOne, classTwo, classThree, classFour];

allClasses.classList.add("active");
allClasses.classList.remove("active");

Doesn't seem to be working though.

No jQuery please.

Maybe that will help you stackoverflow.com/questions/2155737/… — Alex Char
– Alex Char, Commented May 9, 2014 at 13:15
A couple of things to watch out for: classList is not supported in IE8 or IE9. (It can be shimmed, though.) Also, querySelector finds the first matching element in the DOM. — T.J. Crowder
– T.J. Crowder, Commented May 9, 2014 at 13:18

bottens · Accepted Answer · 2014-05-09 13:16:35Z

17

Try this:

var classOne    = document.querySelector(".class1");
var classTwo    = document.querySelector(".class2");
var classThree  = document.querySelector(".class3");
var classFour   = document.querySelector(".class4");

var allClasses = [classOne, classTwo, classThree, classFour];

allClasses.forEach(function(el) {
  el.classList.add("active")
})

answered May 9, 2014 at 13:16

bottens

3,9121 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T.J. Crowder Over a year ago

@user3143218: Presumably "el" means the element in the array, whether you take "element" to mean "array element" or "DOM element". :-)

bottens Over a year ago

Array.prototype.forEach passes in the value of the index it is at. Which in this case will be elements. @T.J.Crowder I was going for DOM elements but good point :)

Fabian von Ellerts · Accepted Answer · 2020-02-05 12:53:02Z

12

Now this can be simplified to:

document.querySelectorAll('.class1, .class2, .class3, .class4').forEach(el => el.classList.add('active'))

If you need legacy browser support, use a regular function or transpile and include this polyfill:

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window
        for (let i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this)
        }
    }
}

If you use querySelectorAll a lot, you can bind it to a variable:

const $$ = document.querySelectorAll.bind(document)

$$('.class1, .class2, .class3, .class4').forEach(el => el.classList.add('active'))

edited Feb 5, 2020 at 12:53

answered Feb 19, 2019 at 9:35

Fabian von Ellerts

5,25143 silver badges35 bronze badges

Collectives™ on Stack Overflow

JavaScript: Add/remove a single class on multiple elements

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related