how to add a css class in javascript

How To Add A CSS Class to an element using JavaScript

Adding specific styling to an element using javaScript  is very easy. You can simply target the object you want to add that specific styling to and then use the style property. But in most cases, when you have multiple styles to add to an object, it becomes a problem typing the style property over and over again. So what could be the solution? One solution is to add CSS class using JavaScript .The examples below will help us learn how to add a CSS class using JavaScript.

Example 1: how to add a css class using javascript

Let us take the following as our html

       <div >

            <h1>Hello i am learning something new</h1>

            <p>i am a lorem ipsum paragraph text</p>

            <button >Submit</button>

            <a href=”www.techknowmore.com”>Learn more</a>

        </div>

Probably what you might be doing before now is something like…

const button = document.querySelector(“button”)

button.style.backgroundColor = “green” //to add background color

button.style.color = “white”   //to add color

button.style.borderRadius = “10px” //to add border radius

And you can see, that your JavaScript file is getting just too much code with less functionality.

So an easy way to reduce this many lines of code is to create a class with predefined styling in CSS and dynamically add them using javaScript

Next we are going to create some style in css( CLASS specifically not an ID )

.parentDiv {

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 120px;

}

.heading {

  color: orange;

  font-family: “Gill Sans”, “Gill Sans MT”, Calibri, “Trebuchet MS”, sans-serif;

  background-color: black;

}

.paragraph {

  font-size: 3rem;

  font-weight: 400;

  color: blue;

  background-color: white;

  text-transform: capitalize;

}

.btn {

  padding: 8px 10px;

  color: white;

  background-color: green;

  font-weight: 600;

  border-radius: 10px;

  display: block;

  width: 150px;

}

.btn:hover {

  color: orange;

  background-color: black;

  transition: all 1s.6s linear;

}

.link {

  text-decoration: none;

  text-transform: uppercase;

  font-size: 18px;

  color: tomato;

}

ADDING THE CLASS IN JAVASCRIPT

const button = document.querySelector(“button”)

//here we are selecting the button

button.classList.add(“btn”)

Classlist Meaning

JavaScript classList allows for manipulation of element’s class content attribute, what it simply does is that, it allows you to manipulate the class applied to an element, with the classList, you can add, remove, check for class value of an element and even toggle

 so we can see how using just two lines of code have saved us from typing and adding many styles on a single line.

You can grab the code below to add CSS class to the other elements in the page.

const headingText = document.querySelector(“h1”)

headingText.classList.add(“heading”)

const paragraph = document.querySelector(“p”)

paragraph.classList.add(“paragraph”)

const link = document.querySelector(“a”)

link.classList.add(“link”)

But the main point is to know how we can add CSS class dynamically using JavaScript.

Your next question will probably be, what if I have multiple buttons in my page and I want to add a CSS class using JavaScript to only one of the button?

ANSWER

There are various method to do it. These includes

  1. Using child selector to target the specific element
  2. Using array method

The easiest probably is to simply add a class to the specific button and the target it in JavaScript.

Example 2

If this is your html

  <div>

            <button>press</button>

            <button>click</button>

            <button>hover</button>

            <button>continue</button>

        </div>

We want to add these styling which are defined in CSS

.addToOne {

  color: orange;

  background-color: black;

  font-weight: 700;

  border-radius: 10px;

}

Next, use JavaScript to add the class dynamically,

const specific = document.querySelector(“.specific”)

specific.classList.add(“addToOne”)

And you will notice that even though there are multiple button, we were able to target just one button and add the our desired class.

You can learn how to use javascript classlist like remove, toggle, contains here

Leave a Comment

Your email address will not be published. Required fields are marked *