How to Add or Remove Element Class Name using JavaScript
In this post we will give you information about How to Add or Remove Element Class Name using JavaScript. Hear we will give you detail about How to Add or Remove Element Class Name using JavaScriptAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to add or remove a class name to an html element by using JavaScript.
Consider we have a div element with an id, and two button elements.
<div id="box"> This is div</div><button id="add-btn">Add class</button><button id="remove-btn">Remove class</button>
Now, we need to add a class to the div element by clicking on a Add class button and remove a class by using the Remove class button.
Adding class
In JavaScript, we have a classList property which contains a add() method that is used to add a class to an element.
Example:
const div = document.getElementById('box');const addBtn = document.getElementById('add-btn');addBtn.addEventListener('click',()=>{ div.classList.add('shadow');})Now, if we click on a Add class button the shadow class is added to the div element.
Removing class
To remove a class we need to use the remove() method in classList property.
const div = document.getElementById('box');const removeBtn = document.getElementById('remove-btn');removeBtn.addEventListener('click',()=>{ div.classList.remove('shadow');})Now, if we click on a Remove class button the shadow class is removed from the div element.
Codepen Demo
Hope this code and post will helped you for implement How to Add or Remove Element Class Name using JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs