javascript check if element has class with code examples

JavaScript provides multiple methods to check if an element has a class. This article will cover three common methods to perform this task: using classList, using the className property, and using the Element.matches() method.

Method 1: Using classList

The classList property is a read-only property that returns a live DOMTokenList collection of the class attributes of an element. You can use the classList.contains() method to check if an element has a specific class. Here's an example:

const el = document.querySelector(".example");

if (el.classList.contains("example-class")) {
  console.log("Element has class 'example-class'");
} else {
  console.log("Element does not have class 'example-class'");
}

In this example, we first select the element using document.querySelector(). We then use the contains() method to check if the element has a class of "example-class". If it does, we log a message to the console. If not, we log a different message.

Method 2: Using className property

The className property returns a string representing the class attributes of an element. You can use this property to check if an element has a specific class by checking if the class name is present in the string. Here's an example:

const el = document.querySelector(".example");

if (el.className.includes("example-class")) {
  console.log("Element has class 'example-class'");
} else {
  console.log("Element does not have class 'example-class'");
}

In this example, we first select the element using document.querySelector(). We then use the includes() method to check if the class name is present in the className property. If it is, we log a message to the console. If not, we log a different message.

Method 3: Using Element.matches()

The Element.matches() method is a method of the Element interface that returns a Boolean indicating if the element would be selected by the provided selector string. You can use this method to check if an element has a specific class by using a class selector. Here's an example:

const el = document.querySelector(".example");

if (el.matches(".example-class")) {
  console.log("Element has class 'example-class'");
} else {
  console.log("Element does not have class 'example-class'");
}

In this example, we first select the element using document.querySelector(). We then use the matches() method with a class selector to check if the element has a class of "example-class". If it does, we log a message to the console. If not, we log a different message.

In conclusion, there are multiple methods to check if an element has a specific class in JavaScript. You can use the classList.contains() method, the className.includes() method, or the Element.matches() method to perform this task. Choose the method that best fits your needs and use it to enhance the functionality of your web page.
Sure! Let's dive deeper into related topics.

Element.classList

The classList property of an element is a live DOMTokenList representing the list of classes for that element. The classList property is a read-only property, but you can modify the list of classes using the following methods:

add(className): adds a class to the list of classes
remove(className): removes a class from the list of classes
toggle(className): adds a class if it doesn't exist or removes it if it does
replace(oldClass, newClass): replaces an existing class with a new class

Here's an example that demonstrates how to use these methods:

const el = document.querySelector(".example");

el.classList.add("new-class");
console.log(el.className); // "example new-class"

el.classList.remove("example");
console.log(el.className); // "new-class"

el.classList.toggle("toggle-class");
console.log(el.className); // "new-class toggle-class"

el.classList.toggle("toggle-class");
console.log(el.className); // "new-class"

el.classList.replace("new-class", "replaced-class");
console.log(el.className); // "replaced-class"

In this example, we first select the element using document.querySelector(). We then use the add() method to add a new class to the element, then use the remove() method to remove the original class. We then use the toggle() method to add and remove a class, and finally use the replace() method to replace an existing class with a new one.

Element.matches()

The Element.matches() method returns a Boolean indicating whether or not the element would be selected by the provided selector string. This method can be used to check if an element matches a CSS selector, which is useful when you want to check if an element has a specific class or if it matches a specific attribute selector.

Here's an example that demonstrates how to use the Element.matches() method:

const el = document.querySelector(".example");

if (el.matches(".example-class")) {
  console.log("Element has class 'example-class'");
} else {
  console.log("Element does not have class 'example-class'");
}

if (el.matches("[data-attribute='value']")) {
  console.log("Element has attribute 'data-attribute' with value 'value'");
} else {
  console.log("Element does not have attribute 'data-attribute' with value 'value'");
}

In this example, we first select the element using document.querySelector(). We then use the Element.matches() method with a class selector to check if the element has a class of "example-class". If it does, we log a message to the console. If not, we log a different message. We then use the Element.matches() method with an attribute selector to check if the element has an attribute of "data-attribute" with a

Popular questions

Sure! Here are five questions and answers about checking if an element has a class in JavaScript with code examples:

What is the simplest way to check if an element has a class in JavaScript?

The simplest way to check if an element has a class in JavaScript is to use the Element.classList.contains() method. For example:

const el = document.querySelector(".example");

if (el.classList.contains("example-class")) {
  console.log("Element has class 'example-class'");
} else {
  console.log("Element does not have class 'example-class'");
}

How can you add a class to an element in JavaScript?

You can add a class to an element in JavaScript by using the Element.classList.add() method. For example:

const el = document.querySelector(".example");

el.classList.add("new-class");
console.log(el.className); // "example new-class"

How can you remove a class from an element in JavaScript?

You can remove a class from an element in JavaScript by using the Element.classList.remove() method. For example:

const el = document.querySelector(".example");

el.classList.remove("example");
console.log(el.className); // ""

How can you toggle a class on an element in JavaScript?

You can toggle a class on an element in JavaScript by using the Element.classList.toggle() method. For example:

const el = document.querySelector(".example");

el.classList.toggle("toggle-class");
console.log(el.className); // "example toggle-class"

el.classList.toggle("toggle-class");
console.log(el.className); // "example"

How can you check if an element matches a CSS selector in JavaScript?

You can check if an element matches a CSS selector in JavaScript by using the Element.matches() method. For example:

const el = document.querySelector(".example");

if (el.matches(".example-class")) {
  console.log("Element has class 'example-class'");
} else {
  console.log("Element does not have class 'example-class'");
}

Tag

DOM-Manipulation