How to add a class to DOM element in JavaScript?

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:htmlhtml<!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:
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>
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.classNameExample:htmlhtml<!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:
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>
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+
sooda367
HTML-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.