How to Check if element has class in JavaScript

CSS classes are very helpful when need to add same style on multiple HTML elements.

Sometimes need to perform an action based on a class element has.

In this tutorial, I show how you can check if element has a specific class using JavaScript with examples.

Check class on a single element using JavaScript
Check class on multiple elements using JavaScript
Conclusion

1. Check class on a single element using JavaScript

HTML

Create a <div id='divel' > and added class red to it.
Create a button that calls hasClass() function. Pass <div > instance and class name that needs to check.
In example, I am checking red class on <div id='divel' >.
Display class status in <div id='result1'></div> using JavaScript.

JavaScript

Create hasClass() function.
It takes 2 parameters –
- Element instance in which search class.
- Class name that needs to find.
Use classList.contains() to search on element. It returns a boolean value.
If its return true then display True message to <div id='result1'> otherwise, display False message.

Completed

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>How to Check if element has class in JavaScript</title>
</head>
<body>
   <style>
   .content{
      width: 100px;
      height: 100px;
      color: white;
   }

   .red{
      background: red;
   }
   </style>

   <h2>Search class on single element</h2>
   <div class='content red' id='divel' ></div>

   <br><br>
   <input type='button' value="Has class - red" onclick="hasClass(document.getElementById('divel'),'red')">

   <br><br>
   <b>Result : </b><br>
   <div id='result1'></div>

   <!-- Script -->
   <script type="text/javascript">

   // Single search
   function hasClass(el,classname){

      if(el.classList.contains(classname)){
          document.getElementById('result1').innerHTML = 'True';
      }else{
          document.getElementById('result1').innerHTML = 'False';
      }
   }

   </script>
</body>
</html>

View Demo

2. Check class on multiple elements using JavaScript

HTML

Created 3 <div class='content' > elements. 2 <div > has red class and 1 has blue class. 1 button to search red class.

Display <div > ids that has red class in <div id='result2'>.

JavaScript

Create 2 functions –

hasClass() –

This function takes 2 parameters – element instance and search class name. Search classname using classList.contains() and return true and false.

checkClass() – Using this function display <div > ids that has red class.

This function calls on button click. This function takes 1 parameter – search class name. Loop on <div > that has class name content. Pass <div > instance and classname variable in hasClass() function.

If it returns true then read <div > id attribute and append in ids variable.

Display <div > ids in <div id='result2'>.

Completed Code

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>How to Check if element has class in JavaScript</title>
</head>
<body>
   <style>
   .content{
       width: 100px;
       height: 100px;
       display: inline-block;
       color: white;
   }

   .red{
       background: red;
   }

   .blue{
       background: blue;
   }
   </style>

   <h2>Search class on multiple elements</h2>

   <div class='content red' id='div1'>div1</div>
   <div class='content blue' id='div2'>div2</div>
   <div class='content red' id='div3'>div3</div><br><br>
   <input type='button' value="Has class - red" id='check' onclick="checkClass('red');">

   <br><br>
   <b>Result</b><br><br>
   <div id='result2'></div>

   <script type="text/javascript">

   // Search class
   function hasClass(el,classname){

      if(el.classList.contains(classname)){
         return true;
      }else{
         return false;
      }
   }

   // Multiple search
   function checkClass(classname){
      var div = document.getElementsByClassName('content');
      var totalel = div.length;
      
      var ids = "";
      for(var i=0;i<totalel;i++){

         if(hasClass(div[i],classname)){
            var divid = div[i].getAttribute('id');
            ids += divid + ", ";
         }
         document.getElementById('result2').innerHTML = ids;

      }
   }
   </script>
</body>
</html>

View Demo

3. Conclusion

I hope using the examples you have successfully implemented class searching using JavaScript.

You can view this tutorial to know class searching using jQuery.

If you found this tutorial helpful then don't forget to share.

How to Check if element has class in JavaScript

Contents

1. Check class on a single element using JavaScript

2. Check class on multiple elements using JavaScript

3. Conclusion

Leave a Comment Cancel reply