How to check the given element has the specified class in JavaScript ?
Last Updated :
11 Sep, 2024
In JavaScript, checking if a given element has a specified class involves verifying whether the element includes a particular class name within its list of classes. This can be useful for applying conditional styling, behaviors, or logic based on the presence of specific CSS classes.
Here we have two different approaches to check the given element has the specified class in JavaScript
Using classList.contains() Method
This method checks whether the specified class name exists in the class list of the element. It returns true if the class is present and false otherwise. This approach is modern, efficient, and provides a clear way to manage class checks in JavaScript.
Syntax
element.classList.contains("class-name");Example: In this example, we checks if the element with the ID "main" contains the classes "main" and "myClass," logging whether each class is found or not to the console.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Using classList.contains() Method</title>
</head>
<body>
<h1 id="main" class="main">Welcome To GFG</h1>
<script>
let elem = document.getElementById("main");
let isMainPresent = elem.classList.contains("main");
if (isMainPresent) {
console.log("Found the class name");
} else {
console.log("Not found the class name");
}
let isMyclassPresent =
elem.classList.contains("myClass")
if (isMyclassPresent) {
console.log("Found the class name");
} else {
console.log("Not found the class name");
}
</script>
</body>
</html>
Output:
Using className with split() and indexOf()
The className with split() and indexOf() approach involves using the className property to get a string of all class names on an element. By splitting this string into an array, you can check if a specified class exists using indexOf().
Syntax
TMLElementObject.className;
Example: In this example we checks if the element with ID "main" contains the classes "main" and "myClass" using split() and indexOf(), logging the results to the console.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using className with split() and indexOf()</title>
</head>
<body>
<h1 id="main" class="main">Welcome To GFG</h1>
<script>
let elem = document.getElementById("main");
// Check if 'main' class exists
let classes = elem.className.split(' ');
if (classes.indexOf('main') > -1) {
console.log("Found the class name");
} else {
console.log("Not found the class name");
}
// Check if 'myClass' class exists
if (classes.indexOf('myClass') > -1) {
console.log("Found the class name");
} else {
console.log("Not found the class name");
}
</script>
</body>
</html>
Output:
Using className with split() and indexOf() example Output