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.
Contents
- 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 classred
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 displayTrue
message to<div id='result1'>
otherwise, displayFalse
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>
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 hasred
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>
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.