Change Element class Using JavaScript : You can use JavaScript to change the element’s class simply using the className attribute. You can also use this to add multiple classes to the element. Here in this tutorial we are going to explain how to change the element’s class using JavaScript. You can use our online editor to run the demo.
How to Change Element class Using JavaScript ?
JavaScript Replace(Change) All Classes By One(Single) Class
You can use className attribute to replace all classes by one class as below –
JavaScript className : Syntax
Syntax to change the className using the pure JavaScrpt is as Below –
JavaScript className Syntax:
document.getElementById("ElementId").className = "NewClass";
|
Where ElementId is id selector of the element. NewClass is class name you want to add.
JavaScript className : Example
The above example changes the class of element which have id “myId”. It will add the new class YellowBg to the element. If you run the above example it will produce the output something like this –
More Examples
Let’s have look over more example and demo here.
JavaScript Add Additional Class
If you want to add additional class in the existing element without removing/affecting the existing classes, use the className method as in below example –
The above example will append the given class “borderBlack” to the element. Make sure you add a blank space before the class name so that it is not collapsed with other existing class name.