# How to add a CSS class to an element using JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Aug 13, 2020, updated Sep 23, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-add-a-css-class-to-an-element

> Learn how to add one or more CSS classes to an HTML element by using the classList property in JavaScript.

To add a CSS class to an HTML element, you can use the `classList` property of the element. It is a read-only property that returns a live `DOMTokenList` collection of all the classes applied to the element.

Let us say you have the following HTML element:

```html
<div>?</div>
```

To add the `pizza` class to the above `<div>` element, you can use the following code:

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

div.classList.add('pizza');
```

The `classList.add()` method also allows you to add multiple classes:

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

div.classList.add('pizza', 'spice', '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.