Javascript is fun and powerful and

In this tutorial, we are gonna use Javascript powers to manipulate the styles

styling by classList
Power of Javascript

By classList

What is classList ???

Classes in CSS

Before talking about classList we need to talk about classes in CSS

So actually class is just a way to add styles in our HTML webpage it is a CSS selector which applies a certain code to a specific part of the code

Syntax of a class in CSS

The class has a quite easy syntax which is quite easy to remember

A class is declared by using a .(dot), yeah you read it right it is a dot

Let’s see this

.className{
	property:value;
    property2:value;
}

Yeah Let’s see an example

.className{
	color: red;
}

The above code, when applied to the HTML file, it will change the text color to red wherever the class is applied like here

Styling by classList
classList has the class

So on this webpage, the heading in the red color has the classList class as you can see in the code

classList styling setup
class applied here

So might be you know that what is class If you want a more thoro guide you can check MDN DOCS

classList

Now you might be thinking that Hey now I know class than what is classList so let me help you

classList is a property of DOM which enables us to play with the classes.

Let’s have a look at it

So actually classList gives us various opportunities to add a class, remove a class, toggle them check the class and a lot

Let’s see them One by One

Adding a class by classList

It’s quite easy to add a class by using classList

To add a class by classList

First, we need to select the part where we want to use classList to add or remove classes and save it to a variable

We can select the part by using querySelector (querySelector is just a way to select a part of the webpage)

var playGround = document.querySelector(".className")

now this variable will contain the heading in the red color which has the class className

Now let’s create another class named as changeFont

	.changeFont{
		font-family: Sans-Serif;
	}

Now this above class wherever it is added it will change the font style to Serif

Let’s See how to add this class to our paragraph

To add the class to our paragraph we need to use .add

playGround.classList.add("changeFont")

Now when you run this code it will add the changeFont class to the heading in red color as you can see below

Using classList to add

As you can see in the above image the red heading has a little bit different font

Now Let’s talk about removing a class but before that let’s talk about checking is the class is associated with a particular element on the page or not

Checking Element for a class

I am gonna use the great scenario which i used above to know is a class exists or not we need to use .contains

Let’s have a look at it

So to check the class we need to run

playGround.classList.contains("changeFont") 

// true

If you run this it will return true means this contains the class “changeFont” simple if it does not have that class it will return false

playGround.classList.contains("classNotPresent")

//false

As you can see in the image below

classList contains

Pretty cool Right

Also, there is one other thing which i need to include is index of class

Index of class

Suppose you are working with something great but now you are in an error condition and you want to know that which certain class is located on which place

Now what most of the guys gonna do is that gonna count them but hey what about the 100 different classes name ahh maybe than you will think “What the F**K”

But there is a solution as well and that solution is Index of Class yeah you heard it right it as same as the index of an array if you don’t know what that is i recommend reading this post of mine Here

Let’s have a look at it as well

// playGround.classList.item(number to check on )//
playGround.classList.item(1)

//changeFont//

Now when you will run this it will show you which class is located at a certain index

Now maybe you have an idea that how to add or check classes but now let’s talk about removing them

How to Remove Classes by classList

The class removal is also a quite easy process it as same as like the add or the contains which will take the class name and will remove it \

Let’s add a Demo class to play with it

//To add Demo class //
playGround.classList.add("Demo")

//To Remove the Demo Class//
playGround.classList.remove("Demo")

Now after you run this it will remove the Demo class

As in the ScreenShot

Now you have add, remove, contains and item in your arsenal but still there is something missing

Let’s Imagine a Scenario that what will you do if you are said that if changeFont class is present then remove it and if not then add it

Now How Will you solve that problem might be you are thinking about a nest of if-else conditions but that’s way too more complicated for this simple situation don’t you think

Let’s talk about a way more shorter way of doing it we can achieve the same functionality by using the toggle

Toggle the classes

Toggling classes is a way easier way instead of doing things like

	if(playGround.classList.contains("changeFont")){
		playGround.classList.remove("changeFont")
	}
	else{
		playGround.classList.add("changeFont")
	}

You can just simply summarize this code in 1 line

playGround.classList.toggle("changeFont")

Pretty cool right you can also trigger it with an event listener to make it more fun

Wrapping UP

Now Maybe you have a complete understanding of classList and how to deal with classes and style your webpage by using classes if you have any queries, questions, appreciations you know the comment section is all yours