Add,Remove and Toggle Classes of Html elements using vanilla JavaScript

Sometimes we need to add some classes on html elements Dynamically to change the styles of those elements as our need.In this case we need to take help of JavaScript to do this.Because javascript DOM helps us to manipulate any html elements.

How to create Scroll To Top button without JavaScript?

So we also have some predfined methods to Add, Remove and Toggle classes of any HTML Elements dynamically in javascript.

I'm Nowshad Hossain Rahat and in this tutorial i will discuss about how to add,remove and toggle html classes using vanilla javascript, so let's see the codes step by step to achieve these functionalities into our web page!😊

Add Class :

<style type="text/css">
    
    /* this class will change the background color to "red" */
    
    .red {
        background: red;
        color: #fff;
    }
    
</style>

<div id="div1">
	<!-- your codes -->
	Class will be added on this Div
</div>

<!-- when you click this button "addClass" function will be called -->

<button onclick="addClass()">Click Here</button>

<script type="text/javascript">
	
    // this function will be called when you will click the button 
	
    function addClass(){
	    
	    // selecting the "div1" element
	    let div1 = document.querySelector("#div1");
	    
	    // adding class to the selected div
	    div1.classList.add("red");
	    
    }
    
</script>

This is the minimum JavaScript code to add classes on any html element.

In the above code there is a class called "red" which will make the background red coloured and there is a button which will trigger a javascript function "addClass()" when someone clicks on it.

How to turn GitHub repository into a CDN ( With ScreenShots )

When the "addClass()" function will be called the class "red" will be added to the selected div.

Before adding the class :

After adding the class :

😀😀😀😀😀😀😀😀😀😀😀

Now you can easily add class to any html elements using vanilla JavaScript.So now i will just show you the codes to Remove and Toggle class of html elements 😊

Remove Class :

<style type="text/css">
    
    /* this class will change the background color to "red" */
    
    .red {
        background: red;
        color: #fff;
    }
    
</style>

<div id="div1" class="red">
	<!-- your codes -->
	Class will be removed from this Div
</div>

<!-- when you click this button "removeClass" function will be called -->

<button onclick="removeClass()">Click Here</button>

<script type="text/javascript">
	
	// this function will be called when you will click the button 
	
	function removeClass(){
	    
	    // selecting the "div1" element
	    let div1 = document.querySelector("#div1");
	    
	    // removing class from the selected div
	    div1.classList.remove("red");
	    
    }
    
</script>

Remember one thing that,if the html element doesn't have the class then the class will not be removed!

Before removing :

After removing :

Toggle Class :

<style type="text/css">
    
    /* this class will change the background color to "red" */
    
    .red {
        background: red;
        color: #fff;
    }
    
</style>

<div id="div1">
	<!-- your codes -->
	Class will be toggled on this Div
</div>

<!-- when you click this button "toggleClass" function will be called -->

<button onclick="toggleClass()">Click Here</button>

<script type="text/javascript">
	
	// this function will be called when you will click the button 
	
	function toggleClass(){
	    
	    // selecting the "div1" element
	    let div1 = document.querySelector("#div1");
	    
	    // removing class from the selected div
	    div1.classList.toggle("red");
	    
    }
    
</script>

Toggling means that,if the html elements doesn't have the class then it will be added and if it has,then it will be removed.

How to make CSS Text Shadow

Thanks for reading this tutorial.Hope you understand the codes perfectly.But if not,then you can ask me your questions in the comment section below.😊