How to add a class to DOM element in JavaScript?

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!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");
                  
                // Ading 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>

    chevron_right

    
    

    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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.