Change class of an element with JavaScript/jQuery
This post will discuss how to change the class of an element using JavaScript and jQuery.
1. Replace a class with another class
To replace a class with another class, you can remove the old class using jQuery’s .removeClass() method and then add the new class using jQuery’s .addClass() method.
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function replaceClass(id, oldClass, newClass) { var elem = $(`#${id}`); if (elem.hasClass(oldClass)) { elem.removeClass(oldClass); } elem.addClass(newClass); } $(document).ready(function() { $("#darkmode").click(function() { replaceClass("container", "light", "dark"); }); $("#lightmode").click(function() { replaceClass("container", "dark", "light"); }); }); |
CSS
|
1 2 3 4 5 6 7 |
.light { background-color: #ffffff; } .dark { background-color: #243447; } |
HTML
|
1 2 3 |
<div id="container" class="light"></div> <button id="darkmode">Dark Mode</button> <button id="lightmode">Light Mode</button> |
In plain JavaScript, you can make use of Element.classList.remove() and Element.classList.add() methods to remove and add a class, respectively.
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function replaceClass(id, oldClass, newClass) { var elem = document.getElementById(id); elem.classList.remove(oldClass); elem.classList.add(newClass); } document.getElementById("darkmode").onclick = function() { replaceClass("container", "light", "dark"); } document.getElementById("lightmode").onclick = function() { replaceClass("container", "dark", "light"); } |
CSS
|
1 2 3 4 5 6 7 |
.light { background-color: #ffffff; } .dark { background-color: #243447; } |
HTML
|
1 2 3 |
<div id="container" class="light"></div> <button id="darkmode">Dark Mode</button> <button id="lightmode">Light Mode</button> |
2. Replace all classes with one or more new classes
To replace all existing classes with one or more new classes, you can simply replace the content of the class attribute with the new classes. Here’s an example in jQuery demonstrating this using the .attr() method.
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $("#darkmode").click(function() { $("#container").attr("class", "dark"); }); $("#lightmode").click(function() { $("#container").attr("class", "light"); }); }); |
CSS
|
1 2 3 4 5 6 7 |
.light { background-color: #ffffff; } .dark { background-color: #243447; } |
HTML
|
1 2 3 |
<div id="container" class="light"></div> <button id="darkmode">Dark Mode</button> <button id="lightmode">Light Mode</button> |
In plain JavaScript, we can do this with the className attribute.
JS
|
1 2 3 4 5 6 7 |
document.getElementById("darkmode").onclick = function() { document.getElementById("container").className = "dark"; } document.getElementById("lightmode").onclick = function() { document.getElementById("container").className = "light"; } |
CSS
|
1 2 3 4 5 6 7 |
.light { background-color: #ffffff; } .dark { background-color: #243447; } |
HTML
|
1 2 3 |
<div id="container" class="light"></div> <button id="darkmode">Dark Mode</button> <button id="lightmode">Light Mode</button> |
3. Toggle a class
You can even implement a toggle feature in JavaScript which toggles between two classes. Here’s a working example:
JS
|
1 2 3 4 5 6 7 8 9 10 |
document.getElementById("mode").onclick = function() { if (this.innerText === "Dark Mode") { this.innerText = "Light Mode"; } else { this.innerText = "Dark Mode"; } document.getElementById("container").classList.toggle("dark"); } |
CSS
|
1 2 3 4 5 6 7 |
.light { background-color: #ffffff; } .dark { background-color: #243447; } |
HTML
|
1 2 |
<div id="container" class="light"></div> <button id="mode">Dark Mode</button> |
That’s all about changing the class of an element using JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)