When working with the element in JavaScript, sometimes you need to add a class if it doesn’t exist on the element by JavaScript. In this article, you will be introduced two methods for achieving your goal: the classList.add() method and the className property.
Add a class if it doesn’t exist on element by JavaScript
Using the classList.add() method
The easiest way to add a new class to an element when it doesn’t exist in that element using JavaScript is to use the classList.add(). This way will add the new class to an element only when it doesn’t have a class we want to add, and when the element already has the class, this method won’t add any class to the selected element.
For example:
<html>
<body>
<style type="text/css">
/* Set style to class "newClass" */
.newClass {
background-color: Aquamarine;
}
</style>
<p id="myParagraph">Learn share IT</p>
<button onclick="addclass()">Add class</button>
<script>
function addclass() {
// Select element
var element = document.getElementById("myParagraph");
// Add class to element
element.classList.add("newClass");
}
</script>
</body>
</html>Output:
In the above example, we have created a function to add the “newClass” to the paragraph with id=”myParagraph”. When we click on the button for the first time, the paragraph has been added to a new class and the background changed to blue.
The classList.add() method adds the class if the element does not contain the added class, so no effect happens when we click the button a second time.
Using className property
The className property is used to name the class attribute of an element. However, this property will overwrite the new class on the old one if the element already has those classes. Using the className property to add a new class to an element unless it exists in that element, we can check if it already has the class we want to add.
For example:
<html>
<body>
<style type="text/css">
/* Set style to class "newClass" */
.newClass {
background-color: Aquamarine;
}
</style>
<p id="myParagraph" class="class">Learn share IT</p>
<button onclick="addclass()">Add class</button>
<script>
function addclass() {
// Select element
var element = document.getElementById("myParagraph");
// Checking whether the element has class or not
if (element.classList.contains("newClass")) {
document.write("Element already exit class");
}
// Add class to element
element.className = "newClass";
}
</script>
</body>
</html>Output:
In the above example, when we click the button for the first time, the element is given a new class called “newClass” and the background is changed to blue. However, when we click the button for the second time, because the element already has the class “newClass”, we can’t add that class anymore.
Summary
In this article, you learned how to add a new class to an element when it doesn’t exist in that element utilizing JavaScript in two ways. It would be best if you used the classList.add() method because it is the most accessible and fastest way, and you don’t need to do any extra steps to achieve your goal. Hope this article is helpful to you.
Hi, I’m Mary Ralston. I have experience programming in HTML, javascript, C++,… and I want to share with you my experience. So if you want to know more about the above languages read my articles