How to Check Whether an Element Has a Class in JavaScript

By the end of this page, you will understand how JavaScript stores classes on DOM elements, why comparing the full className string often fails, and how to correctly check for a single class using classList.contains(). You will also see fallback ideas, common mistakes, and practical examples used in real projects.

In JavaScript, an HTML element can have multiple CSS classes at the same time.

For example:

<div class="class1 class5"></div>

This element has two classes:

• class1
• class5

When you read element.className, JavaScript gives you the entire class string, not one class at a time.

console.log(element.className); // "class1 class5"

That means a switch statement or direct equality check like this:

if (element.className === "class1")

only works when the class attribute is exactly "class1". It fails if there are extra classes, a different order, or extra spaces.

The correct modern solution is to use the DOM classList API:

Think of an element's classes like stickers placed on a box.

A box might have these stickers:

• fragile
• blue
• priority

If you ask, "Is this box exactly fragile?" the answer is no, because it has more than one sticker.

But if you ask, "Does this box have the fragile sticker?" the answer is yes.

That is the difference between:

• checking the full className string
• checking whether one class exists inside the class list

classList.contains("class1") is the JavaScript way of asking, "Does this box have this sticker?"

The modern syntax is:

element.classList.contains("className")

It returns:

• true if the class exists
• false if it does not

Basic example

<div id="test" class="class1 class5"></div>

var test = document.getElementById("test");

if (test.classList.contains("class1")) {
  test.textContent = "I have class1";
} else {
  test.textContent = "";
}

In this example:

• the element has both class1 and class5

Consider this code:

<div id="test" class="class1 class5"></div>

var test = document.getElementById("test");

if (test.classList.contains("class1")) {
  test.textContent = "I have class1";
} else {
  test.textContent = "";
}

Step by step

1. document.getElementById("test") finds the <div> element.
2. The variable test now refers to this element.
3. test.classList gives access to the element's class list.
4. test.classList.contains("class1") checks whether class1 is one of the classes.
5. The element has class="class1 class5", so the result is .

Checking for classes is common in real front-end code.

Show or hide UI state

if (menu.classList.contains("open")) {
  menu.classList.remove("open");
} else {
  menu.classList.add("open");
}

Used in:

• dropdown menus
• modals
• sidebars
• accordions

Validate state before doing something

if (button.classList.contains("disabled")) {
  return;
}

Used in:

• buttons
• forms
• loading states

Event delegation

document.addEventListener("click", function (event) {
  if (event.target.classList.contains()) {
    .();
  }
});

In real projects, developers usually use class checks in small, readable patterns.

Guard clauses

A guard clause exits early if a class is present or missing.

if (!card.classList.contains("selected")) {
  return;
}

console.log("Process selected card");

This avoids deep nesting.

State-driven UI

function toggleModal(modal) {
  if (modal.classList.contains("open")) {
    modal.classList.remove("open");
    return;
  }

  modal.classList.add("open");
}

This is common for UI state management.

Validation before action

function submitForm(button) {
  if (button.classList.()) {
    ;
  }

  button..();
}

1. Comparing the full className string

Broken example:

if (test.className === "class1") {
  console.log("yes");
}

Why it fails:

• it only matches exact text
• it breaks when there are multiple classes
• it can break if class order changes

Better:

if (test.classList.contains("class1")) {
  console.log("yes");
}

2. Using includes() directly on className

Broken example:

if (test.className.includes("class1")) {
  console.log("yes");
}

Why it is risky:

This can produce false matches. For example, would also match .

Quick syntax

element.classList.contains("my-class")

Returns true or false.

Useful classList methods

element.classList.add("my-class");
element.classList.remove("my-class");
element.classList.toggle("my-class");
element.classList.contains("my-class");

Best practice

Use this:

if (element.classList.contains("active")) {
  // do something
}

Avoid this for class existence checks:

element.className === "active"
element.className.includes()

How do I check if an element has a class in JavaScript?

Use element.classList.contains("class-name"). It returns true if the class exists.

Why does className === "class1" fail?

Because className returns the full class string. If the element has class="class1 class5", the string is not exactly "class1".

Can an HTML element have multiple classes?

Yes. Classes are separated by spaces inside the class attribute.

Is classList.contains() better than checking className manually?

Yes. It is clearer, safer, and correctly handles multiple classes.

Can I use includes() on className?

You can, but it is not recommended because it may match partial names such as class1 inside class10.

What is the difference between classList.contains() and matches()?

• DOM selection — Related because you must first get a reference to an element before checking its classes.
• classList API — Directly related because it provides add, remove, toggle, and contains for class management.
• if/else statements — Related because class checks are often used in conditional logic.
• switch statements — Related because the original approach used switch, but it is not ideal for multiple classes.
• Event handling — Related because class checks are commonly used inside click and keyboard event listeners.
• CSS selectors — Related because methods like matches() and querySelector() use selector syntax.
• textContent vs innerHTML — Related because after checking a class, developers often update page content.
• DOM manipulation — Related because checking a class is often followed by changing content, styles, or behavior.