Check If an Element Contains a Class in Javascript?

When working with JavaScript, it is often necessary to check if an element contains a specific class. This can be useful for a variety of scenarios, such as applying styles or performing actions based on the presence or absence of a class.

In this blog post, we will explore two different solutions to check if an element contains a class in JavaScript.

Solution 1: Using the classList property

The classList property provides an easy way to manipulate classes on an element. It includes a contains() method that can be used to check if an element contains a specific class.

Here’s an example:

const element = document.getElementById('myElement');

if (element.classList.contains('myClass')) {
    console.log('Element contains the class');
} else {
    console.log('Element does not contain the class');
}

In this code snippet, we first retrieve the element using its ID. Then, we use the classList.contains() method to check if the element contains the class myClass. If it does, we log a message indicating that the element contains the class. Otherwise, we log a message indicating that the element does not contain the class.

Solution 2: Using the className property

If you are working with older browsers that do not support the classList property, you can use the className property to check if an element contains a class. This property returns a string containing all the classes assigned to the element.

Here’s an example:

const element = document.getElementById('myElement');

if (element.className.includes('myClass')) {
    console.log('Element contains the class');
} else {
    console.log('Element does not contain the class');
}

In this code snippet, we retrieve the element using its ID and then use the includes() method to check if the className string contains the class myClass. If it does, we log a message indicating that the element contains the class. Otherwise, we log a message indicating that the element does not contain the class.

These are two simple solutions to check if an element contains a class in JavaScript. Choose the one that best suits your needs and browser compatibility requirements.

Happy coding!