# How to add or remove multiple CSS classes using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jun 19, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-add-remove-multiple-css-classes

> A quick guide to learn how to add or remove multiple CSS classes at once from an element using JavaScript.

To add or remove multiple CSS classes from an HTML element using JavaScript, you can use the `classList` property.

The `classList` property returns a live collection of all the classes applied to the element as a `DOMTokenList` object.

This property is helpful to add, remove, and toggle CSS classes on an element. useful

The `classList` property is read-only. However, you can modify it using the `add()` and `remove()` methods.

The `add()` method allows you to add one or more CSS classes to an element:

```javascript
const div = document.querySelector('div');

div.classList.add('pizza', 'spice', 'potato');
```

Similarly, the `remove()` can be used to remove one or more CSS classes from an element:

```javascript
const div = document.querySelector('div');

div.classList.remove('pizza', 'potato');
```

The `classList` property only works in modern browsers and IE10 and above.

Take a look at [this article](https://attacomsian.com/blog/javascript-add-remove-toggle-css-classes) to learn more about adding, removing, and toggling CSS classes in JavaScript.