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
Similar Reads
How To Get Element By Class Name In JavaScript ? When working with the DOM in JavaScript, selecting elements by their class names is a common task. JavaScript provides several methods to achieve this, whether we need to select one or multiple elements. In this article, we will cover different approaches to get elements by class name in JavaScript.
3 min read
How to Check an Element with Specific ID Exists using JavaScript ? Given an HTML document containing some elements and the elements contain some id attribute. The task is to check whether the element with a specific ID exists or not using JavaScript. Below are the approaches to check an element with specific ID exists or not using JavaScript:Â Table of ContentApproa
3 min read
How to Check if a Specific Element Exists in a Set in JavaScript ? To check if a specific element exists in a Set in JavaScript, you can use the has method. The has method returns a boolean indicating whether an element with the specified value exists in the Set Syntax:myset.has(value);Parameters:value: It is the value of the element that has to be checked if it ex
1 min read
How to return true if the parent element contains the child element in JavaScript ? In JavaScript, children property returns an array of those elements which are children of a given element. In order to check whether the parent element (say x) contains a child element (say y), we can use the children property to get the array of all children of x and then check whether the array ob
2 min read
How to check if an element has any children in JavaScript ? The task is to find out whether an element has child elements or not with the help of JavaScript. We're going to discuss a few techniques. ApproachSelect the Parent Element.Use one of the firstChild, childNodes.length, children.length property to find whether an element has a child or not.hasChildNo
2 min read
How to Toggle an Element Class in JavaScript ? In JavaScript, toggling an element class refers to the process of dynamically adding or removing a CSS class from an HTML element. This allows developers to easily change an element's appearance or behavior in response to user actions, such as clicks or events.These are the following methods for tog
2 min read