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.