Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to test if an element contains class in JavaScript in HTML?
In JavaScript, we can check whether an HTML element contains a particular class using the classList.contains() method. This is especially useful when working with dynamic content or when you need to conditionally apply styles or behavior based on an element's classes.
The classList.contains() method is the standard and most reliable way to test for class existence on DOM elements.
Syntax
element.classList.contains(className)
Parameters:
-
className- A string representing the class name to check for
Return Value: Returns true if the element contains the specified class, false otherwise.
Example: Basic Class Check
<!DOCTYPE html>
<html>
<body>
<h2>Testing if an element contains class in JavaScript</h2>
<p id="myElement" class="highlight">This paragraph has a 'highlight' class.</p>
<button onclick="checkClass()">Check for 'highlight' class</button>
<div id="output"></div>
<script>
function checkClass() {
var element = document.getElementById("myElement");
var hasClass = element.classList.contains("highlight");
var output = document.getElementById("output");
if (hasClass) {
output.innerHTML = "<strong>? Element contains 'highlight' class</strong>";
output.style.color = "green";
} else {
output.innerHTML = "<strong>? Element does not contain 'highlight' class</strong>";
output.style.color = "red";
}
}
</script>
</body>
</html>
Example: Multiple Classes
The contains() method works perfectly with elements that have multiple classes. It checks for the specific class name regardless of other classes present.
<!DOCTYPE html>
<html>
<body>
<h2>Checking Classes on Multi-Class Elements</h2>
<div id="multiElement" class="container active highlight responsive">
Element with multiple classes
</div>
<button onclick="testMultipleClasses()">Test Different Classes</button>
<div id="results"></div>
<script>
function testMultipleClasses() {
var element = document.getElementById("multiElement");
var results = document.getElementById("results");
var classesToTest = ["container", "active", "missing", "highlight"];
var output = "<h3>Class Check Results:</h3><ul>";
classesToTest.forEach(function(className) {
var hasClass = element.classList.contains(className);
var status = hasClass ? "? Found" : "? Not found";
output += "<li><strong>" + className + ":</strong> " + status + "</li>";
});
output += "</ul>";
results.innerHTML = output;
}
</script>
</body>
</html>
Practical Use Cases
Here are common scenarios where checking for classes is useful:
<!DOCTYPE html>
<html>
<head>
<style>
.hidden { display: none; }
.active { background-color: #4CAF50; color: white; }
.disabled { opacity: 0.5; pointer-events: none; }
</style>
</head>
<body>
<button id="toggleBtn" class="active">Toggle Button</button>
<div id="content" class="hidden">This content can be shown/hidden</div>
<button onclick="performActions()">Perform Conditional Actions</button>
<div id="actionResults"></div>
<script>
function performActions() {
var btn = document.getElementById("toggleBtn");
var content = document.getElementById("content");
var results = document.getElementById("actionResults");
var output = "";
// Check if button is active
if (btn.classList.contains("active")) {
output += "Button is active - performing action<br>";
btn.textContent = "Active Button Clicked!";
}
// Check if content is hidden
if (content.classList.contains("hidden")) {
output += "Content is hidden - showing it<br>";
content.classList.remove("hidden");
content.innerHTML = "Content is now visible!";
} else {
output += "Content is visible - hiding it<br>";
content.classList.add("hidden");
}
// Check for disabled state
if (!btn.classList.contains("disabled")) {
output += "Button is enabled and ready for interaction<br>";
}
results.innerHTML = output;
}
</script>
</body>
</html>
Key Points
-
classList.contains()is case-sensitive - Returns a boolean value (
trueorfalse) - Works with elements having single or multiple classes
- More reliable than string-based methods like checking
className - Supported in all modern browsers
Conclusion
The classList.contains() method is the preferred way to check if an element has a specific class. It's reliable, efficient, and works seamlessly with elements containing multiple classes, making it essential for dynamic DOM manipulation.
10K+ Views
