home ~ projects ~ socials

Check If An HTML Element Has A CSS Class With JavaScript

Introduction

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

Example Div
Has Alfa:
Has Bravo:

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