How To Check If An Element Does NOT Have A 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:

• Hide an Element by Class using JavaScript
• Show/Hide an element on Radio button Selection using JS
• Set the Width and Height of an Element using JavaScript

Joni Smith

Hi, my name is Joni Smith. My job is a programmer. I love learning programming languages, especially C++, C#, php, javascript, html, css. I want to share them with you. I hope my articles will bring a lot of useful knowledge to you.

---

Name of the university: HVNH BA
Major: htttql MIS
Programming Languages: C++, C#, php, javascript, html, css