Detecting CSS Classes on HTML Elements with JavaScript

Introduction

When working with web pages, it’s common to need to check whether a specific element has a certain CSS class. This can be useful for applying dynamic styles or functionalities based on the presence of a class. In this tutorial, we’ll explore various methods in JavaScript to determine if an HTML element contains a particular class.

The classList API

The modern and widely supported way to check for classes is by using the Element.classList property. This provides several utility methods, including .contains(), which checks if a specific class exists on the element.

Using classList.contains

Here’s how you can use this method:

const element = document.getElementById('example');
if (element.classList.contains('target-class')) {
    console.log('The element has the target-class.');
} else {
    console.log('The element does not have the target-class.');
}

Example HTML

<div id="example" class="foo bar">Content</div>

Explanation

• document.getElementById('example'): Retrieves the element with ID ‘example’.
• element.classList.contains('target-class'): Returns true if the element has a class named 'target-class', otherwise returns false.

Alternative Method: String Manipulation

For environments where classList might not be available, you can use string manipulation techniques. This involves checking the className property of an element.

Using indexOf

Here’s how to implement this:

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

const element = document.getElementById('example');
if (hasClass(element, 'target-class')) {
    console.log('The element has the target-class.');
} else {
    console.log('The element does not have the target-class.');
}

Explanation

• element.className: Retrieves all classes as a single string.
• ' ' + className + ' ': Ensures that we’re checking for whole words, avoiding partial matches with other class names.

Using Element.matches()

Another modern method is using Element.matches(), which checks if the element would be selected by a CSS selector. This can also determine if an element contains a specific class.

Implementation

const element = document.querySelector('#example');
if (element.matches('.target-class')) {
    console.log('The element matches .target-class.');
} else {
    console.log('The element does not match .target-class.');
}

Explanation

• document.querySelector('#example'): Retrieves the first element matching the selector.
• element.matches('.target-class'): Returns true if the element has a class of 'target-class'.

Considerations for Older Browsers

While modern browsers support these methods, older browsers might not. In such cases:

• Use polyfills like classList.js to enable classList functionality.
• Continue using string manipulation techniques as a fallback.

Conclusion

Checking if an element contains a class is straightforward with modern JavaScript APIs like Element.classList.contains() and Element.matches(). For older browsers, traditional string methods provide a reliable alternative. Choose the method that best fits your project’s compatibility requirements.