published: 02 Oct 2022
2 min read
How to add a CSS class to an element using 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:
<div>🍕</div>
To add the pizza
class to the above <div>
element, you can use the following code:
const div = document.querySelector('div');
div.classList.add('pizza');
The classList.add()
method also allows you to add multiple classes:
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 to learn more about adding, removing, and toggling CSS classes in JavaScript.
Are we missing something? Help us improve this article. Reach out to us.
How to add a CSS class to an element using 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:
<div>🍕</div>
To add the pizza
class to the above <div>
element, you can use the following code:
const div = document.querySelector('div');
div.classList.add('pizza');
The classList.add()
method also allows you to add multiple classes:
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 to learn more about adding, removing, and toggling CSS classes in JavaScript.
Are you looking for other code tips?
JS Nooby
Javascript connoisseur