JavaScript adding a class name to the element - GeeksforGeeks

15 Nov, 2021
In this article, we will learn how to add the class name property to the element, along with understanding the implementation through the example. The class name attribute can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. Adding the class name by using JavaScript can be done in many ways. 
Using .className property: This property is used to add a class name to the selected element.
Syntax:
It is used to set the className property.
element.className += "newClass";
It is used to return the className property.
element.className;
Property Value:
newClass: It specifies the element’s class name. For applying multiple classes, it needs to separate by space.
Return value: It is of string type which represents the class or list of classes of elements with space-separated.
Example: This example uses the .className property to add a class name.
HTML
<!DOCTYPE html><html>  <head>    <title>JavaScript to add class name</title>    <style>    .addCSS {        color: green;        font-size: 25px;    }    </style></head>  <body style="text-align:center;">    <h1 style="color:green;">         GeeksforGeeks     </h1>    <p id="p"> A Computer Science portal for Geeks. </p>      <button onclick="addClass()"> AddClass </button>          <!-- Script to add class name -->    <script>    function addClass() {        var v = document.getElementById("p");        v.className += "addCSS";    }    </script></body>  </html>
Output:
.className Property
Using .add() method: This method is used to add a class name to the selected element.
Syntax:
element.classList.add("newClass");
Example: This example uses .add() method to add class name.
HTML
<!DOCTYPE html><html>  <head>    <style>    .addCSS {        background-color: green;        color: white;        padding: 20px;        font-size: 25px;    }    </style></head>  <body style="text-align:center;">    <h1 style="color:green;">         GeeksforGeeks     </h1>    <p id="p"> A Computer Science portal for Geeks. </p>      <button onclick="addClass()"> AddClass </button>          <!-- Script to add class name -->    <script>    function addClass() {        var elem = document.getElementById("p");        elem.classList.add("addCSS");    }    </script></body>  </html>
Output:
.add() Method
Supported Browser:
Google Chrome 22.0
Microsoft Edge 12.0
Internet Explorer 5.0
Firefox 1.0
Opera 8.0
Safari 1.0
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
bhaskargeeksforgeeks
JavaScript-Questions
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Difference Between PUT and PATCH Request
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills