Check Whether an Element Contains a Class in JavaScript

Using classes in HTML allows elements to be grouped together and have the same styling or functionality. As a result, changing the behavior of all elements participating in a class is as easy as writing or changing a single line of code. In some cases, such as updating a style, users may need to verify whether a particular class is part of an element or not.

This tutorial will illustrate how to check if the element contains a class in JavaScript.

How to Check Whether an Element Contains a Class in JavaScript?

To verify whether an element contains a class, use the following methods:

• contains() method
• matches() method

Let’s understand the working of these methods individually.

Method 1: Check Whether an Element Contains a Class Using contains() Method

The “contains()” method of the “classList” object can be used to verify whether an element has a particular class name. It is one of the most popular methods utilized to determine the class of an element.

Syntax
Follow the given syntax for the contains() method:

Here,

• “element” is an HTML element that will be checked whether it contains this specific class.
• The “class-name” identify the name of the CSS class that the element is a part of

Return value
If the element has the class name, it returns “true”, else it gives back “false”.

Example
Create a button with classes “buttonSize” and “buttonStyle” for styling the button. Attach an “onclick” event with the button that triggers the function to check whether the specified class is part of the button element or not:

Before the JavaScript code, the output will look like this:

In a JavaScript file, simply write these lines of code:

In the above code:

• Define a function “classCheck()” that will be triggered on the button click.
• Then, fetch the button using the “querySelector()” method and store it in a variable “elementClass”.
• Call the “contains()” method by passing a specific class name like “buttonStyle” which will check whether it is part of the button or not.
• If it returns “true”, an alert message will be displayed:

Output

The above output indicates that when the button is clicked, it shows that it has a “buttonStyle” class.

Method 2: Check Whether an Element Contains a Class Using matches() Method

There is another method, “matches()”, that will determine whether the element has a particular class or not. It takes a single parameter, the class name, to verify whether the element contains that class or not.

Syntax
The following syntax is utilized for the matches() method:

In the above syntax,

• The “element” is an HTML element that will be checked whether it contains this particular class or not.
• The “class-name” indicates the name of the CSS class that the element is a part of. The Name of the class is passed to the matches() method with a dot(.) that identifies “class”.

Return value
It also returns “true” if the or element has a class else, “false” is returned.

Example
In a JavaScript file, use the given lines of code to verify whether the element has the specific class or not by calling the matches() method:

In the above code snippet:

• First, define a function “classCheck()” that will be triggered on the button click.
• Then, fetch the button using the “querySelector()” method and store it in a variable “elementClass”.
• Call the “matches()” method by passing a specific class name like here, “buttonStyle” with a dot(.) before it, which will indicate that it is the class and check whether it is part of the button or not.
• If the matches() method returns “true”, an alert message “Yes! the button contains this ‘buttonStyle’ class” will be displayed:

Output

Conclusion

To verify whether an element contains a class, use the JavaScript “contains()” method or the “matches()” method. The contains() method is the most used method to determine the element’s class. Both methods return “true” if the element has a class else “false” is returned. This tutorial illustrated how to check if an element contains a class in JavaScript or not with detailed examples.