How to Check If an Element Contains a Class in JavaScript

Multiple methods exists that are used to check whether the element contains a class. Let’s discuss them separately.

The first method that can handle the task is the element.classList.contains method. The function takes only one parameter. The contains method checks if your classList contains a singular element:

element.classList.contains(class);

But if you work with older browsers and don't want to use polyfills, use indexOf like this:

function hasClass(element, clsName) {
  return (' ' + element.className + ' ').indexOf(' ' + clsName + ' ') > -1;
}

Otherwise, it will return true if the class you are looking for is part of another class name.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div id="test" class="myClass">Welcome to W3Docs</div>
    <script>
      function hasClass(element, clsName) {
        return(' ' + element.className + ' ').indexOf(' ' + clsName + ' ') > -1;
      }
      let val1 = document.getElementById('test');
      alert(hasClass(val1, 'myClass'));
    </script>
  </body>
</html>

The hasClass() Method

The hasClass() method checks whether any of the selected elements have a specified class name. The method returns true if any of the selected elements has the specified class name. Elements may have multiple classes assigned to them.


Do you find this helpful?

Related articles