Change an Element Class with JavaScript Last Updated : 20 Nov, 2024 Comments Improve Suggest changes 5 Likes 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 Create Quiz Comment R RaviBhatt Follow 5 Improve R RaviBhatt Follow 5 Improve Article Tags : Technical Scripter JavaScript Web Technologies Technical Scripter 2018 javascript-basics +1 More Explore JavaScript BasicsIntroduction to JavaScript4 min readVariables and Datatypes in JavaScript6 min readJavaScript Operators5 min readControl Statements in JavaScript4 min readArray & StringJavaScript Arrays7 min readJavaScript Array Methods7 min readJavaScript Strings5 min readJavaScript String Methods9 min readFunction & ObjectFunctions in JavaScript5 min readJavaScript Function Expression3 min readFunction Overloading in JavaScript4 min readObjects in JavaScript4 min readJavaScript Object Constructors4 min readOOPObject Oriented Programming in JavaScript3 min readClasses and Objects in JavaScript4 min readWhat Are Access Modifiers In JavaScript ?5 min readJavaScript Constructor Method7 min readAsynchronous JavaScriptAsynchronous JavaScript2 min readJavaScript Callbacks4 min readJavaScript Promise4 min readEvent Loop in JavaScript4 min readAsync and Await in JavaScript2 min readException HandlingJavascript Error and Exceptional Handling6 min readJavaScript Errors Throw and Try to Catch2 min readHow to create custom errors in JavaScript ?2 min readJavaScript TypeError - Invalid Array.prototype.sort argument1 min readDOMHTML DOM (Document Object Model)8 min readHow to select DOM Elements in JavaScript ?3 min readJavaScript Custom Events4 min readJavaScript addEventListener() with Examples9 min readAdvanced TopicsClosure in JavaScript4 min readJavaScript Hoisting6 min readScope of Variables in JavaScript3 min readJavaScript Higher Order Functions7 min readDebugging in JavaScript4 min read Like