Tutorials Tonight's Logo

Add class using JavaScript


In this article, we will learn how to add CSS class to elements using javascript. We will add single and multiple classes with 2 different methods.

Adding CSS classes to the HTML element change the appearance and behaviour of the element. An ugly element can be made beautiful, a paused element can be run, a dull element can be animation, etc.


When you click the above button JavaScript adds a CSS class named 'smooth' to the button, the code of which is given below.

.smooth {
  border: none;
  color: white;
  background: #f4703d;
  padding: 10px 30px;
}

Let's see how you can add CSS classes to HTML elements using JavaScript.


Using JavaScript classList property

The classList property of the element is a live representation of the element's class attribute.

It provides an add() method which can add a CSS class to the element using javascript.

The class name is passed as an argument to the method in the form of a string.

<head>
  <style>
    .smooth {
      color: white;
      font-family: sans-serif;
      background: #f4703d;
      padding: 10px;
    }
  </style>
</head>

<body>
  <p id="id1">Javascript adds a CSS class to this paragraph.</p>

  <script>
    const element = document.getElementById("id1");
    element.classList.add("smooth");
  </script>
</body>

Output:

output 1

Adding class on an event

Using the classList property and add() method you can add a class by triggering a certain event.

Create a function that selects the targeted element using javascript and add desired class to it as shown in the example below.

<head>
  <style>
    .beautify {
      color: white;
      font-family: sans-serif;
      background: #f4703d;
      padding: 10px;
    }
  </style>
</head>

<body>
  <p id="id1">Javascript adds a CSS class to this paragraph on an event.</p>
  <button onclick="addClass()">Add class to above paragraph</button>

  <script>
    function addClass() {
      const element = document.getElementById("id1");
      element.classList.add("beautify");
    }
  </script>
</body>

Output:

output 2

Adding Multiple classes using JavaScript

The add() method of classList property can add multiple classes at a time to the element. You can pass the class name of multiple elements as arguments separated by commas.

<head>
  <style>
    .color {
      color: white;
      background: #f4703d;
    }

    .border {
      border: 1px solid black;
    }

    .others {
      font-family: sans-serif;
      padding: 10px;
    }
  </style>
</head>

<body>
  <p id="id1">Javascript adds multiple CSS class to this paragraph.</p>
  <button onclick="addClass()">Add classes to above paragraph</button>

<script>
  function addClass() {
    const element = document.getElementById("id1");
    element.classList.add("color", "border","others");
  }
</script>


Using JavaScript className property

The className property of an element can be used to get and set classes attached to the element.

It returns the classes of the element in form of string. If element has a class named class1 then it returns "class1", if element has 2 classes class1 and class2 then it returns "class1 class2", and so on.

<p class="box" id="id1">Paragraph 1</p>
<p class="big red box" id="id2">Paragtaph 2</p>

<script>
  const element1 = document.getElementById("id1");
  const element2 = document.getElementById("id2");
  console.log(element1.className); // "box"
  console.log(element2.className); // "big red box"
</script>

To add a new class to the element assign it to the element's className property.

But directly assigning a class to className replaces older classes.

function addClass() {
  const element = document.getElementById("id1");
  element.className = "box";
  // all older classes will be replaced by box
}

Output:

output 3

To add new classes without replacing older classes use the += operator to assign the new class. It will keep older classes and adds new ones.

function addClass() {
  const element = document.getElementById("id1");
  element.className += " box"; // must add space before class name
  // new class added, old one remained
}

Possible mistake: Add a space before the name of the class when using className to add class. Because if the element has an old class "class1" and you add the new class "class2" it becomes "class1class2" which is meaningless to the browser.

Adding multiple classes

To add multiple classes assign new class names separated by spaces to the className property of the element.

function addClass() {
  const element = document.getElementById("id1");
  element.className += " big box";
  // multiple classes separated by spaces
}

Add class to the body using JavaScript

To add class to the body of the webpage select the body by document.body and use either of the 2 mentioned method to add CSS classes.

<button onclick="addClass()">Add class to body</button>

<script>
  function addClass() {
    document.body.classList.add("color")
  }
</script>

Add class to div using JavaScript

As mentioned above you can use any of the above 2 methods to add class to div element using javascript.

  1. Step 1: Select the element
  2. Step 2: Use either className or classList property
<div id="id1">This is inside a div element</div>
<button onclick="addClass()">Add class to div</button>

<script>
  const div = document.getElementById("id1");
  function addClass() {
    div.classList.add("box");
  }
</script>

Add a class on hover javascript

To add a class on an element on hover use onmouseover event. Attach an onmouseover event to the element trigger event handler to add the class.

<div id="id1" onmouseover="addClass()">This is inside a div element</div>

<script>
  const div = document.getElementById("id1");
  function addClass() {
    div.classList.add("box");
  }
</script>

Conclusion

We learnt 2 different ways to add CSS classes to the elements using javascript in this article. we also looked at how to add multiple classes to the elements at a time and how to trigger different events to add a class.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.