How To Check If An Element Does NOT Have A Specific Class Using JS?

Check if an Element does NOT have specific Class using JS

There are many ways to check if an element does NOT have a specific class using JS. In this article, I will introduce you 4 straightforward ways, and please follow below.

Check if an element does NOT have a specific class using JS

Using element.classList.contains 

To check if an element contains the given class or not, you can use the contains method of the classList property in DOM element.

Syntax

element.classList.contains(“classname”)

Parameter

  • classname: Class name of the element we want to check.

Return: The method returns true if the element contains the classname, otherwise false.

For example, there are two elements as follows:

<div id="id1" class="hasClass">This element has specific class</div>
<div id="id2">This element does not have specific class</div>

The steps to check whether an element has a specific class or not are as follows:

  • Query to the element to be checked
  • Use the element.classList.contains() method to check for the given class
// Query
let element1 = document.getElementById("id1");
let element2 = document.getElementById("id2");

// Use method element.classList.contains()
let result1 = element1.classList.contains("hasClass");
let result2 = element2.classList.contains("hasClass");

function checkClass(x) {
	if (x) {
		document.write("True <br>");
	} else {
		document.write("False <br>");
	}
}

checkClass(result1); // Output: True
checkClass(result2); // Output: False

A more concise way is that you can use the classList method, too:

// Query
let element1 = document.getElementById("id1");
let element2 = document.getElementById("id2");

// Use method
console.log(element1.classList);
console.log(element2.classList);

Output:

Using element.className 

The className method will return the class name of the specified element to us.

As well as the example above and here is the JavaScript code:

// Query
let element1 = document.getElementById("id1");
let element2 = document.getElementById("id2");

// Use method
console.log(element1.className);
console.log(element2.className);

Output:

Using element.getAttribute

getAttribute() in Javascript is a method of element object, which has the effect of getting the specified attribute value of an element.

The return value of the getAtrribute() method will be the value of the specified attribute. If the specified attribute is not found, then it will return a null value.

Still, with the above example:

// Query
let element1 = document.getElementById("id1");
let element2 = document.getElementById("id2");

// Use method
console.log(element1.getAttribute('class'));
console.log(element2.getAttribute('class'));

Output:

Summary

This article has shown you using the element.classList.contains method, element.className method and element.getAttribute method to check if an element does NOT have specific class using JS. The methods are all simple so choose the best method for your case. If you have any questions, leave a comment below. Thank you for reading, and have a great day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *