Check If an Element Has a Class in JavaScript

Suppose you want to use JavaScript to check whether or not a DOM element in your web app’s frontend has a particular CSS class.

What’s the best way to accomplish this?

I asked myself this question today as I was working on a new version of a theme for one of my affiliate websites. There wasn’t a lot of helpful information on this topic out there. So, after scouring the Internet for a good solution, I decided to share it with you all in this blog post.

To check if a DOM element has a CSS class in JavaScript, select the element with document.querySelector() and use the classList.contains() function to test for the class you want.

Here’s how this looks like in a code snippet:

document.querySelector('#my-element').classList.contains('my-class');

For this function to work, make sure to replace #my-element and my-class with the correct values for your implementation. Notice that there is no dot before the class name and make sure to keep it that way.

The result, as long as you’ve queried the element properly, will be a Boolean with a value of true or false:

• If the DOM element contains the CSS class, the function will return true;
• If the DOM element doesn’t contain the CSS class, the function will return false.

How This Works

You need to create a function that does two things, basically. One is to locate the element, the other to check the class list. Below, I share my reasoning for why I chose this approach.

Step 1. Locate the Element

First, your function must locate the DOM element whose class list you want to check. There’s more than one way to do this, but I’d argue the best is using the document.querySelector() function.

With it, you can use any CSS selector, simple or complex, to locate your element. The same can’t be said for document.getElementById() and the likes, which limit you to a specific attribute of the DOM element in question.

Step 2. Check the Class List

Second, your function must check whether a specific CSS class is within the DOM element’s class list or not.

Once again, there are different ways to achieve this, but classList.contains() is supported by all modern browsers. If compatibility with legacy browsers is of the essence, there’s also a polyfill available.

Ways to Enhance This

For starters, let’s define this as a function and add a function-scoped variable for an element:

function checkForClass() {
  let element = document.querySelector('#my-element');
  element.classList.contains('my-class');
}

(We’re using let instead of var to declare the element variable because it limits the scope of that variable to the block statement, and we don’t intent to use it anywhere else.)

We can also pass the query for the DOM element and the CSS class to test for dynamically:

function checkForClass(query, class) {
  let element = document.querySelector(query);
  element.classList.contains(class);
}

In Conclusion

This is it. The simplest, most elegant, and, at the same time, most versatile approach that I could come across.

As with any approach, I’m sure it has limitations and edge cases. If you can think of any—or you came across some as you tried to implement it—please share them with the rest of this post’s readers in the comments below.