How to Add Class Name to the HTML Element Through JavaScript?

July 9, 2022 | by Arround The Web | No comments

How to Add Class Name to the HTML Element Through JavaScript?

JavaScript provides a couple of approaches for adding the class name to an HTML element such as the “.add()” method and the “.className” property. Class name can be added to elements using the CSS(cascading style sheet) and JavaScript. The main purpose of adding class name to an HTML element is to achieve different functionalities on the selected element using the specified class name.

The below-listed JavaScript approaches can be used to add the class name to an HTML element:

So, let’s get started!

What is “.add()” in JavaScript?

“.add()” is a built-in method of the classList property that can be used to add the class name to any specific HTML element. The below snippet will let you understand how to use the “.add” method in JavaScript:

element.classList.add("class_Name");

How does the “.add()” method work in JavaScript?

This section will present a step-by-step guide to understand how to add the class name to an HTML element using JavaScript.

In this program we will create three files an “html” file, a “CSS” file, and a “JavaScript” file:

HTML

<h2>How to add class name to the HTML element through javaScript? </h2>
<button onClick="classNameFun()"> Click Me! </button>
<h3> clicking on the "Click Me!" button will add the class name to the following p element </h3>
<p id="addClass">
Welcome to linuxhint.com!!
</p>

In the above snippet we performed the following functionalities:

We utilized the <h2> tag to add a heading.
Next, we utilized <button> tag to create a button and named it as “Click Me!”.
Invoked the “classNameFun()” whenever the user clicked on the button.
Next, we created an <h3> element.
Finally, we created a paragraph using <p> element and assigned it an id “addClass”.

CSS

.style {
text-align: center;
font-style: italic;
background-color: black;
color: white;
}

The CSS file served the following functions:

Align the text in the center using the “text-align” property.
Set the italic font style using “font-style” property.
Set the black background color using “background-color” property.
Finally, set the white text color using the “color” property.

JavaScript

function classNameFun() {
let para= document.getElementById("addClass");
para.classList.add("style");
}

The .js or JavaScript file served the below-listed functionalities:

Created a function named “classNameFun()”.
Utilized the getElementByid() method to read/edit an HTML element having an id “addClass”.
Finally, utilized the add method to add the name to the <p> element.

Output
On successful execution of the code, initially, we will get the following output:

Clicking on “Click Me!” button will generate the below-given output:

This is how the “.add()” method work in JavaScript.

What is “.className” in JavaScript?

The “.className” is a property in JavaScript that sets/returns the class attributes of an HTML element. It can be used to add/specify the class name to any HTML tag.

The following snippet will show the basic syntax of the “.className” property:

element.className = class_Name;

Here, the “class_Name” represents the name of the class. In case of multiple classes, we can specify the classes name using comma separated syntax.

How does the “.className” property work in JavaScript?

Let’s consider the below given example to get the basic understanding of the “.className” property.

HTML

<h3>How to add class name to the HTML element through javaScript? </h3>
<button onClick="classNameFun()"> Click Me! </button>
<h4 id="addClass"> clicking on the "Click Me!" button will add the class name to this element </h4>

The HTML class performed the following tasks:

Utilized the <h3> element to add a heading.
Utilized <button> tag to create a button and named it as “Click Me!”.
Invoked the “classNameFun()” whenever the user clicked on the button.
finally, created an <h4> and assigned it an id “addClass”.

CSS

The CSS file will remain the same as in the previous example.

JavaScript

function classNameFun() {
let hElement = document.getElementById("addClass");
hElement.className = "style";
}

In the JavaScript file, we utilized the getElementById() method to read/edit an HTML element having an id “.addClass”. Afterward, we utilized the add method to add the name to the <p> element.

Output
When we run the above-given program, initially, this program will produce the below-given output:

After clicking on the “Click Me!” button, the classNameFun() will be invoked, consequently, we will get the following output:

The output clarifies that the class name has been added successfully to the <h4> element.

Conclusion

In JavaScript, the “.add()” method and “.className” property are used to add the class name to any HTML element. This write-up explained all the basics for adding class names to any HTML element. This post explained how to use the “.add()” method and “.className” property with the help of some suitable examples.

Source: linuxhint.com