Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add a class to DOM element in JavaScript?

  • Last Updated : 28 Oct, 2021

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: 
 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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>

Output: 

  • Before clicking the button: 
     

  • After clicking the button: 

Supported Browsers: The browser supported by classList property are listed below:  

  • Chrome 8+
  • Opera 11.5+
  • Safari 5.1+
  • Edge 10+
  • Mozilla Firefox 3.6+



My Personal Notes arrow_drop_up
Recommended Articles
Page :