Javascript add class

In this article, we will take a look at different ways to add CSS class to an element using javascript dynamically.

Using className property
An element in javascript can be accessed using its id with getElementById() of document object.
This element has a className property which refers to the CSS class in HTML DOM.

For this example, the HTML is as below

<html>
  <head>
    <style>
      .red{ color:red }
    </style>
  <body>
    <div id="ele">Add Class with javascript</div>
  </body>
</html>

Below javascript code selects the div using its id and adds CSS class using its className property

<script>
  document.getElementById('ele').className = 'red';
</script>

Multiple classes with className
Multiple classes can be applied to an element at once, by providing class names separated by a space. Example,

<script>
  document.getElementById('ele').className = 'red bold highlight';
</script>

Above code will apply 3 CSS classes in a single statement.

To append a class to already applied classes to an element, use += operator as shown below

<script>
  document.getElementById('ele').className += ' red';
</script>

This will add CSS class to existing classes already added to the element. Do not forget to add a space before the class.

To add multiple classes with +=, provide class names separated by space as below

<script> 
  document.getElementById('ele').className += ' red bold highlight'; 
</script>

Using classList property
CSS class can also be added to an element using its classList property. This property is a read only property which returns a list of CSS classes applied to an element.
In order to add a class, use its add() method providing it the class name as argument. Example,

<script> 
  document.getElementById('ele').classList.add('red'); 
</script>

Multiple classes with classList
To add multiple classes to an element with classList, use its add() method with the names of classes separated by a space as shown below.

<script> 
  document.getElementById('ele').classList.add('red bold highlight'); 
</script>

This code will add 3 CSS classes to div at once.

classList is not fully supported in IE versions till 10. If you are targetting lower versions, go with className.

Using jQuery
If you are using jQuery, then use its addClass() method. It takes the class name to be added as argument.

Select the element with jQuery and invoke addClass() method. Below code selects the div using its id and applies the required class.

<script> 
 $('#ele').addClass('red)'; 
</script>

Above code will select the element with id ele and add a CSS class red.

Multiple classes can be added with addClass() by providing the class names separated by a white space. Example,

<script> 
  $('#ele').addClass('red bold classic'); 
</script>

Add class to Multiple elements
Multiple elements can be selected using getElementsByClassName().

Consider below HTML

<html>
  <body>
    <div id="test1" class="e">Dynamic class1</div>
    <div id="test2" class="e">Dynamic class2</div>
    <div id="test3" class="e">Dynamic class3</div>
    <div id="test4" class="e">Dynamic class4</div>
  </body>
</htmml>

All the div elements have the same class and they can be selected with getElementsByClassName() method, providing it the name of class.

getElementsByClassName() returns a collection of all the elements having the class provided.

To add a class to multiple elements, we iterate over this collection and add class to eacch element using className or classList property. Example,

// get all elements with class
let divs = document.getElementsByClassName('e');
// iterate over elements
for(let i = 0;i < divs.length; i++) {
  // add class to each div
  divs[i].className+=' red';
}

Add class to body
To add class to body element, use document.getElementsByTagName() method with the name of tag, that is, body as argument.

getElementsByTagName() returns a collection or array of elements. To get the body element, select the first element or element at index 0, since there is only 1 body element.
Below code adds a class to body

<script>
  document.getElementsByTagName('body')[0].className = 'red';
</script>

To sum, we can add CSS class to an element in javascript with className and classList property after selecting an element with document object.
Hope the article was useful.

Add CSS class to element in javascript

Javascript add class