How to add a class to DOM element in JavaScript?

Last Updated : 03 Jan, 2022

DOM (Document Object Model) is a way of manipulating the document (HTML document). This article will deal with how to access and set class names to the DOM elements. In DOM, all HTML elements are defined as objects. We will be using Javascript against CSS to manipulate them.

Following are the properties of Javascript that we will be using to add a class to the DOM element:

classList Property: It returns the class name as a DOMTokenList object. It has a method called “add” which is used to add class name to elements.

Syntax:

element.classList.add("className")

Example:

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geek { 
            background-color: green; 
            font-size: 50px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <button onclick="myClass()">Try it</button> 
  
    <div id="gfg">Geeks for Geeks</div> 
  
    <script> 
        function myClass() { 
            var elem = document.getElementById("gfg"); 
            
            // Adding class to div element 
            elem.classList.add("geek");  
        } 
    </script> 
  
</body> 
  
</html> 

Output:
Before clicking the button:

After clicking the button:

className Property: This property returns the className of the element. If the element has already a class then it will simply add another one to it or else it will append our new class to it.

Syntax:

HTMLElementObject.className

Example:

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geekClass { 
            background-color: green; 
            text-align: center; 
            font-size: 50px; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div id="gfg"> 
        Geeks For Geeks 
    </div> 
  
    <button onclick="myClassName()">Add Class</button> 
  
    <script> 
        function myClassName() { 
            var element = document.getElementById("gfg"); 
              
            // Adding the class geekClass to element 
            // with id gfg space is given in className 
            // (" geekClass") as if there is already 
            // a class attached to an element than our 
            // new class won't overwrite and will append 
            // one more class to the element  
            element.className += " geekClass";  
        } 
    </script> 
  
</body> 
  
</html> 