Vanilla JavaScript allows you to add or remove multiple classes for the DOM element in 3 different ways. Depending on your needs you may choose one of the following:

1. classList property
2. className property
3. setAttribute method
4. Bonus toggle multiple classes in DevTools

1. classList property

The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element

- MDN

The classList property should be your primary way to work with classes in JavaScript. The classList property has add() and remove() methods that allow passing multiple classes as arguments.

Let’s say we have a button with id value of button. To add multiple classes, you’ll need to pass each class as a separate parameter to the add method. The same goes if you want to remove multiple classes.

const button = document.getElementById('button')

button.classList.add('btn', 'btn-primary', 'btn-primary--footer')
button.classList.remove('btn', 'btn-primary', 'btn-primary--footer')

You can utilize the spread syntax if you’re willing to store and manipulate your classes in an array. In my opinion, this approach is much cleaner, and arrays have a bunch of useful methods you can utilize to add or remove classes.

const button = document.getElementById('button')
const classes = ['btn', 'btn-primary', 'btn-primary--footer']

button.classList.add(...classes)
button.classList.remove(...classes)

Toggle classes

With the help of the classList property you can actually toggle classes with one method: toggle(). The toggle() method accepts two arguments: token and force.

The token is a string and represents a class name. The force is optional, if included, based on the value will only add or remove a class. If it’s true then it will only add, if false only remove.

However please note that the token argument should be a single string without any spaces. So this means it can toggle one class name at a time!

const button = document.getElementById('button')

button.addEventListener('click', () => {
  button.classList.toggle('btn--active')
})

Browser support for classList property.

2. className property

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

- MDN

This className approach is convenient when you’re decided to work with string type for the class value. To add or remove multiple classes, you’ll have to add up or remove the class on the string.

const button = document.getElementById('button')

button.className = 'btn btn-primary btn-primary--footer'
// to remove certain classes, you'll need to reassign 
// the value to the className property
button.className = 'btn'

Browser support for className property.

3. setAttribute method

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

- MDN

While the setAttribute method may not look as straightforward as classList still, it can be used to add multiple classes. Like in the method above, multiple classes can be specified in one string.

const button = document.getElementById('button')

button.setAttribute('class', 'btn btn-primary btn-primary--footer')
// to remove certain classes, you'll need to update the 
// the value by calling this method again
button.setAttribute('class', 'btn')

This approach is quite useful when creating a new element, and you use a custom function to assign multiple different attributes to an element.

Browser support for setAttribute method.

4. Bonus toggle multiple classes in DevTools

You can easily add or remove multiple classes in your browser’s DevTools. This works in Chrome and Firefox: