How to Add Active Class in JavaScript

While developing a website, sometimes your code becomes so lengthy and complex that you cannot add or remove CSS ids or classes individually. To tackle such situations, you can use JavaScript to add active classes for styling or to fulfill other purposes. JavaScript provides different methods to resolve the stated complex issue instantly.

This manual will explain the procedure of adding an active class in JavaScript.

How to Add Active Class in JavaScript?

To add an active class, we will use the following methods:

document.getElementById()
document.querySelector()

Let’s head over to the first method!

Method 1: Use document.getElementById() With classList.add() Method to Add Active Class in JavaScript

In JavaScript, the “document.getElementById()” method is used to access a certain element by its id. However, it only selects the elements based on their ids, not classes. You can use it with the “classList.add()” method for adding an active class in JavaScript.

Let’s explore this method by taking an example.

Example

In our HTML file, we will take the “<p>” tag with some text, specify its id as “txt”, and add an “onclick” event which will trigger the “activate()” function. Note that, add the <p> tag within <body> tag:

In the JavaScript file, define the activate() function in such a way that it firstly accesses the paragraph element using its id in the document.getElementbyId() method. Then, add a CSS class to its class list for styling purposes:

function activate() {

var a = document.getElementById("txt");

a.classList.add("newclass");

}

In the CSS file, place a dot before “newclass” and assign the “background-color” property a value “orange”:

.newclass {

background-color: orange;

}

As a result, when you will click on the paragraph element, the added background property will be applied to it:

Let’s have a look at the following method in which we will use the document.querySelector() to add an active class.

Method 2: Use document.querySelector() With classList.add() Method to Add Active Class in JavaScript

In JavaScript, the “document.querySelector()” method is utilized to get the first element from the code. You can specify classes and ids both within the querySelector() method. It can be used with the “classList.add()” method for adding an active class in JavaScript.

Example

We will now only use the “document.querySelector()” with id “#txt” to select the paragraph element. Again, the classList.add() method will be used to add the active “newclass”:

function activate() {

var a = document.querySelector("#txt");

a.classList.add("newclass");

}

Output

We have learned two simplest methods to add active class in JavaScript

Conclusion

To add active class, we can utilize the “getElementById()” or “querySelector()” with the classList.add() method. Both mentioned methods get elements by their id first, then using classList.add() method, the new class name assigned to the element that can be used for styling purposes. This post has described the procedure related to adding an active class in JavaScript.

How to Add Active Class in JavaScript