Home

Check If An HTML Element Has A CSS Class With JavaScript

October 2024

Introduction

You can use the .classList.contains() property of an element to see if it has a specific CSS Class. For example:

Output

Example Div
Has Alfa:
Has Bravo:

HTML

<div id="example-div" class="alfa">Example Div</div>

<div>Has Alfa: <span id="has-alfa"></span></div>

<div>Has Bravo: <span id="has-bravo"></span></div>
JavaScript
function checkForClasses() {
  const exampleDiv = document.querySelector("#example-div")

  const hasAlfaSpan = document.querySelector("#has-alfa")
  if (exampleDiv.classList.contains("alfa") === true) {
    hasAlfaSpan.innerHTML = "Yes"
  } else {
    hasAlfaSpan.innerHTML = "No"
  }

  const hasBravoSpan = document.querySelector("#has-bravo")
  if (exampleDiv.classList.contains("bravo") === true) {
    hasBravoSpan.innerHTML = "Yes"
  } else {
    hasBravoSpan.innerHTML = "No"
  }
}

document.addEventListener("DOMContentLoaded", () => {
  checkForClasses()
})
end of line

References