Techstacker
Light ModeDark ModeReset dark mode. Falls back to OS dark mode setting.

Pages

No results for 'undefined'

Blog Posts

No results for 'undefined'
Powered by Algolia

How to Add a Class to an Element With Vanilla JavaScript

Dec 29, 20172 min readJavaScriptViews:

Adding a class to an HTML element is simple when using JavaScript’s classList property method, add(). First, we take a quick look at the generic formula — and follow up with a practical example.

The formula


var element = document.querySelector('selector');
element.classList.add('class');
Find target element. Then add specified class to target element.

In the generic example above, we find the first HTML element on a page with the specified selector name (it could be an element selector, class selector, etc.) and store a reference to it with a variable.

Then we attach the classList property’s add() method to the element and specify the class we want to add.

Practical classList example

Let’s try finding the first paragraph element on this page you’re reading right now, and give it a class of bg-red.


var firstParagraph = document.querySelector('p');
firstParagraph.classList.add('bg-red');
Add this to your browser Console and hit enter.

And the result:

Adding a red background color to the first paragraph element, using the JavaScript classList property’s add method.

Note: I have the bg-red class in my website’s CSS stylesheet, that’s why it works. The class looks like this:


.bg-red {
background-color: #CF4B32;
}

You can use the classList add method to add any custom class, using any CSS property, from colors to font sizes.

Add multiple classes to the same element

You can easily add numerous classes to your target element at the same time. Let’s try adding 3 classes to our first paragraph element:

var firstParagraph = document.querySelector('p');

firstParagraph.classList.add('text-center', 'text-xxl', 'italic');
Remember to separate each class in the add method’s arguments

This will make the first paragraph on this page center aligned and give it a big font size, and ital­i­cize it. Try it out yourself.

Resources


Has this been helpful?
Let me know in the comments!

Or share it with your friends :-)


© 2019 - TechStacker
Powered byGatsbyGithubNetlify