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

Table of Content

Using classList.contains() Method
Using className with split() and indexOf() Method

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:

Screenshot-2023-12-15-151711

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>