The class attribute serves a purpose in CSS by allowing specific tasks to be executed on elements that share the same class name. This article will explore the methods available for assigning a class to an element through JavaScript. In JavaScript, there are several techniques to append a class to an element. We can utilize the .className property or the .add method to incorporate a class name into the designated element.
At this point, we will explore the various methods for appending a class to an element.
Using .className property
The .className property is utilized to define the class name of an element. This property is also capable of retrieving the current value of an element's class attribute. Furthermore, it allows us to append a new class to an HTML element without overwriting the classes already present.
To include several classes, their names should be separated by a space, for instance, "class1 class2".
When an element already has an assigned class, and you wish to append an additional class name to that same element, it is essential to include a space before the new class name. Failing to do so will result in replacing the current class name. The addition can be expressed in the following manner:
<div id = "div1" class = "oldClass"> </div>
document.getElementById("div1").className = " newClass";
In the code provided above, a space has been added prior to newClass.
Syntax
Below is the frequently utilized syntax for this property, which can be employed to either assign or retrieve the class name.
To set the class name
element.className = class
To return the class name
element.className
An illustration of utilizing the .className property is presented below.
Example - Adding the class name
In this illustration, we utilize the .className property to assign the "para" class to the paragraph element that possesses the id "p1". We are implementing the CSS styles on the relevant paragraph through the class name "para".
We need to click on the provided HTML button labeled "Add Class" in order to observe the resulting effect.
<!DOCTYPE html>
<html>
<head>
<title>
add class name using JavaScript
</title>
<style>
.para {
font-size: 30px;
background-color: yellow;
color: blue;
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>
Hello World :)
</h1>
<p id = "p1">
Welcome to the logic-practice.com
</p>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">
Add Class
</button>
<script>
function fun() {
var a = document.getElementById("p1");
a.className = "para";
}
</script>
</body>
</html>
Output
Upon clicking the specified button, the resulting output will be -
In the following example, we retrieve the name of the class utilizing the .className property.
Example - Getting the class name
In this illustration, we utilize the .className attribute to retrieve the class names associated with the paragraph element that has the id set to "p1".
To observe the effect, we need to click on the provided HTML button labeled "Get Class name."
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>
Hello World :)
</h1>
<p id = "p1" class = "para jtp">
Welcome to the logic-practice.com
</p>
<p> Click the following button to get the class name. </p>
<p id = "p2"> </p>
<button onclick = "fun()">
Get Class name
</button>
<script>
function fun() {
var a = document.getElementById("p1").className;
document.getElementById('p2').innerHTML = "The class names of paragraph with 'id = p1' is: " + a;
}
</script>
</body>
</html>
Output
Upon clicking the specified button, the result will be -
Using add method
Next, we will explore the alternative method of incorporating a class name through JavaScript. The add function can be utilized to append a class name to a specific element.
Syntax
element.classList.add("class name");
Example
In this illustration, we utilize the add function to append a class name to the paragraph element identified by id = "p1". To observe the effect, it is necessary to click on the specified HTML button labeled "Add Class".
<!DOCTYPE html>
<html>
<head>
<title>
add class name using JavaScript
</title>
<style>
.para {
font-size: 30px;
background-color: yellow;
color: blue;
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>
Hello World :)
</h1>
<p id = "p1">
Welcome to the logic-practice.com
</p>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">
Add Class
</button>
<script>
function fun() {
var a = document.getElementById("p1");
a.classList.add("para");
}
</script>
</body>
</html>
Output
Upon clicking the specified button, the resulting output will be -