JS - Add an array of classes to an element

Question

I decided to take off my jQuery trainer wheels and try some native JS. It's been...educational.

Anyway, here's what I'm trying to emulate:

$('.select_me').addClass('give_me more_classes');

So far, I've figured out how to select elements and add a single class to them. What I'm having trouble with, is using an array to add multiple classes to an element.

Here's what I've tried:

// Select the element
var div = document.querySelector('.select_me');

// Create an array with the classes to add
var classArray = ['give_me', 'more_classes'];

// Apply the new classes.
div.classList.add('just_a_test', 'okay'); // Works, but not what I want.
div.classList.add.apply(null, classArray); // Uncaught TypeError: Illegal invocation

I suspect I'm using apply() wrong, but I'm not yet knowledgeable enough to know how to use it properly. Could one of you fine folk educate me, or point me in the right direction?

JSFiddle:
https://jsfiddle.net/peg8zrw7/2/

Lye Fish · Accepted Answer · 2015-04-03 03:07:07Z

16

The context of the .add() method is important. Using null won't work because then add will have no idea what to operate on.

Do this instead:

var cl = div.classList;
cl.add.apply(cl, classArray);
// ----------^-- sets the `this` value of the `.add()` method

// Select the element
var div = document.querySelector('.select_me');

// Create an array with the classes to add
var classArray = ['give_me', 'more_classes'];

// Apply the new classes.
var cl = div.classList;
cl.add('just_a_test', 'okay');
cl.add.apply(cl, classArray);

div {
    width: 100px;
    height: 100px;
    background-color: #eeeeee;
}

.select_me.just_a_test.okay {
    border: 2px solid #000000;
}

.select_me.give_me {
    background: #666666;
}

.select_me.more_classes {
    border-radius: 50% 0px 50% 0px;
}

<div class="select_me"></div>

Note that in ECMAScript 6 (and currently in Firefox) you'll be able to do this:

div.classList.add(...classArray);

edited Apr 3, 2015 at 3:07

answered Apr 3, 2015 at 2:58

Lye Fish

2,57818 silver badges25 bronze badges

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

4 Comments

TheRealWazzar Over a year ago

Aha, that did it. Thank you very much! And the more I hear about ES6, the better it sounds. That's one of the reasons why I left jQuery out of this particular project.

Lye Fish Over a year ago

@TheRealWazzar: You're welcome. And yeah, I stopped using jQuery a couple years ago. There's just really not much need for it anymore (as long as you're not supporting IE6/7).

Chris Ferdinandi Over a year ago

Worth noting: classList is IE10+, so you'll want to use a shim to push this back to IE8. developer.mozilla.org/en-US/docs/Web/API/Element/…

CybeX Over a year ago

quite helpful indeed!

Sarout · Accepted Answer · 2022-01-25 14:21:49Z

1

you can add ... cl inside the parentheses, or you can directly add them like classList.add("ClassOne","ClassTwo","ClassThree"). Mozilla Element.classList

// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

answered Jan 25, 2022 at 14:21

Sarout

9001 gold badge8 silver badges26 bronze badges

Comments

Jorge Y. C. Rodriguez · Accepted Answer · 2015-04-03 03:14:21Z

0

The best way to do more stuff in vanilla JavaScript is to always look at the Mozilla developers site or youmaynotneedjquery

if (el.classList){
  el.classList.add(className);
}else{
  el.className += ' ' + className;
}

This simple statement can be implemented inside a function and create your own library of code to avoid using jQuery.

answered Apr 3, 2015 at 3:14

Jorge Y. C. Rodriguez

3,4565 gold badges42 silver badges64 bronze badges

Collectives™ on Stack Overflow

JS - Add an array of classes to an element

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related