In this blog post you’ll learn how to get the class name of clicked HTML element using JavaScript. We’ll see different approaches to get the class name of the element which is clicked.
How it works:
We are going to make a few boxes on the document. When the user clicks on any of the boxes its class name will appear.
Get the Class Name of Clicked Element.
Lets first create the design of boxes with HTML and CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get clicked element class name. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Maketechstuff.com</h1>
<div class="box">
<div class="class_1"></div>
<div class="class_2"></div>
<div class="class_3"></div>
<div class="class_4"></div>
<div class="class_5"></div>
</div>
<div class="output"></div>
</div>
</body>
</html> CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(90deg, blue, #9c4ac2);
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #fff;
padding: 30px;
border-radius: 5px;
font-size: 20px;
text-align: center
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.box div:active {
transform: scale(0.90);
}
.output {
font-size: 25px;
font-weight: bold;
background-color: #f2f2f2;
padding: 10px;
margin: 20px 0px;
border-radius: 5px;
text-align: center;
} Output:
As you can see in the image above, we’ve added 5 boxes. We are going to get their class name by clicking on it using JavaScript.
We are going to see 3 approaches to get the class name of the clicked element.
Approach 1: Combination of event.target and className property.
Target property returns the element where the event occurred.
ClassName property returns the class name.
JavaScript
let box = document.querySelector(".box");
let output = document.querySelector(".output");
box.addEventListener("click", get_class_name);
function get_class_name(e){
output.innerHTML = e.target.className;
}
Approach 2: Combination of event.target and getAttribute property.
getAttribute property returns the value of element attribute.
JavaScript
let box = document.querySelector(".box");
let output = document.querySelector(".output");
box.addEventListener("click", get_class_name);
function get_class_name(e){
output.innerHTML = e.target.getAttribute("class");
}
In both approaches 1 and 2, we get only class name of element which is inside the box class along with box class on click.
If you want to get the class name of any element present in the document or webpage on a click, You can add event listener to document instead of box class. Like this:
JavaScript
let box = document.querySelector(".box");
let output = document.querySelector(".output");
document.addEventListener("click", get_class_name);
function get_class_name(e){
output.innerHTML = e.target.className;
}
Approach 3: Combining the forEach Method and className property.
JavaScript
let output = document.querySelector(".output");
let box_classes = document.querySelectorAll(".box div");
box_classes.forEach(element => {
element.onclick = function(){
output.innerHTML = element.className;
// Or you can also use getAttribute method.
// output.innerHTML = element.getAttribute("class");
}
});
Output:
So that's how you can get the class name of clicked element dynamically using JavaScript. If you have any query or suggestion feel free to write in the comment section.
Share your thoughts.