Change an Element Class with JavaScript Last Updated : 20 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Here are two different ways to change the element class with JavaScript.1. Using .className PropertyIn this approach, we are using document.getElementById() method to get access to the element for which we want to change the class name then we use using .className property on that selected element to directly assign the class name to the element, for doing that we have created a function in which we have access to the targetted element and changed their class name. Syntaxdocument.getElementById('myElement').className = "myclass";Example: We have changed the class of the button from "default" to "newClass" using the onclick event. HTML <body style="text-align: center;"> <button class="default" onclick="changeClass()" id="myButton"> Click Here! </button><br> <p id="myPara"> Old class name: default </p> <script> function changeClass() { document.getElementById('myButton') .className = "newClass"; let button_class = document.getElementById('myButton') .className; document.getElementById('myPara') .innerHTML = "New class name: " + button_class; } </script> </body> OutputOutput2. Using classList.replace() MethodIn this approach, we are using document.getElementById() method to get access to the targetted element then we have used classList property to check whether the given class name is already present or not, if it is present then it will change that class name by the given new class name. Example: This example shows the use of .replace() method to change the class name of the given element. HTML <body style="text-align: center;"> <button class="default" onclick="changeClass()" id="myButton"> Click Here! </button><br> <p id="myPara"> Old class name: default </p> <script> function changeClass() { document.getElementById('myButton') .classList.replace("default", "newClass"); let button_class = document.getElementById('myButton') .className; document.getElementById('myPara') .innerHTML = "New class name: " + button_class; } </script> </body> OutputOutput Comment More infoAdvertise with us Next Article Change an Element Class with JavaScript R RaviBhatt Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies Technical Scripter 2018 javascript-basics +1 More Similar Reads JavaScript adding a class name to the element In JavaScript, adding a class name to an element allows you to style or manipulate it via CSS or JavaScript. This can be achieved using different methods. Here, we'll explore two common approaches: using the .className property and the .add() method.Below are the different approaches that could be u 3 min read How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read JavaScript Change the Text of a Span Element Updating the text of HTML elements, such as a <span> in JavaScript allows developers to dynamically alter webpage content. This technique is used for creating interactive web features like displaying user feedback, updating real-time data, or modifying elements based on user actions. Here, we' 3 min read How to Add a Class to DOM Element in JavaScript? Adding a class to a DOM (Document Object Model) element in JavaScript is a fundamental task that enables developers to dynamically manipulate the appearance and behavior of web pages. Classes in HTML provide a powerful way to apply CSS styles or JavaScript functionality to multiple elements at once. 2 min read How to Toggle an Element Class in JavaScript ? In JavaScript, toggling an element class refers to the process of dynamically adding or removing a CSS class from an HTML element. This allows developers to easily change an element's appearance or behavior in response to user actions, such as clicks or events.These are the following methods for tog 2 min read Like