Let’s unlock the full potential of classList.add() method in JavaScript and learn how to dynamically add CSS classes to your HTML elements.
This article provides easy-to-follow instructions and examples to help you master this essential feature.
So, keep reading to learn new insights concerning the classList.add() method in JS.
What is JavaScript classlist property?
The classList property is a way to access and manipulate the classes of an HTML element using JavaScript.
Using classList is like an easier way to get a bunch of classes that belong to an element, instead of getting them as a sentence with spaces using element.className.
Although the classList property itself is read-only, you can modify its associated DOMTokenList using the add(), remove(), replace(), and toggle() methods.
For example, if you have an HTML element with the class “my-element” and you want to add another class “highlight” to it, you can do that using the classList.add() method like this:
document.querySelector('.my-element').classList.add('highlight'). This will add the “highlight” class to the element, and you can then use CSS to style it accordingly.
What is classlist.add in JavaScript, and what does it do?
The add() method of the classList property in JavaScript is used to add one or more class names to an element.
If the specified class value already exists in the element’s class attribute, the add() method will not add it again.
This method can be very useful when you want to dynamically add a class to an element based on some condition or user interaction.
For example, you could use the add() method to add a “highlight” class to an element when the user hovers their mouse over it, and then use CSS to style the element accordingly.
classList.add()
Here’s an example code that illustrates on how to add classlist in JavaScript using classList.add() method:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to Itsourcecode!</h2>
<p id="my-element">This is just an example.</p>
<button onclick="addClass()">Add Class</button>
</div>
<script>
// Get the element with the id "my-element"
const myElement = document.getElementById("my-element");
function addClass() {
// Add the "highlight" class to the element
myElement.classList.add("highlight"); ✅
}
</script>
</body>
</html>
Output:
As you can see, when the user clicks the button, the element gives a yellow background color.
classList.remove()
The remove() method removes a class from an element’s list of classes. If the specified class does not exist, it will not throw an error.
Here’s an example that demonstrates how to use the remove() method of the classList property in JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to Itsourcecode!</h2>
<p id="my-element" class="highlight"> Removing classes to HTML elements with JavaScript classList.remove() </p>
<button onclick="removeClass()">Remove Class</button>
</div>
<script>
// Get the element with the id "my-element"
const myElement = document.getElementById("my-element");
function removeClass() {
// Remove the "highlight" class from the element
myElement.classList.remove("highlight"); ✅
}
</script>
</body>
</html>
Output:
classList.toggle()
The toggle() method toggles a class on an element. If the specified class exists, it will be removed.
If it does not exist, it will be added.
Here’s an example code that will help you understand how to use toggle() method to add or remove classes.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to Itsourcecode!</h2>
<p id="my-element">This is just an example code using classList.toggle().</p>
<button onclick="toggleClass()">Toggle Class</button>
</div>
<script>
// Get the element with the id "my-element"
const myElement = document.getElementById("my-element");
function toggleClass() {
// Toggle the "highlight" class on the element
myElement.classList.toggle("highlight"); ✅
}
</script>
</body>
</html>
Output:
classList.replace()
The replace() method replaces an existing class with a new class. If the specified old class does not exist, it will not throw an error.
Here’s a code example that illustrates how to use the classList.replace method to replace an existing class with a new one.
This will help you understand how to do it.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
.selected {
background-color: lightblue;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h2>Welcome to Itsourcecode!</h2>
<p id="my-element" class="highlight">This is just an example code using classList.replace()</p>
<button onclick="replaceClass()">Replace Class</button>
</div>
<script>
// Get the element with the id "my-element"
const myElement = document.getElementById("my-element");
function replaceClass() {
// Replace the "highlight" class with the "selected" class
myElement.classList.replace("highlight", "selected"); ✅
}
</script>
</body>
</html>
Output:
Here’s a complete example that demonstrates how to use the add(), remove(), replace(), and toggle() methods of the classList property:
<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
background-color: yellow;
}
.newClass {
background-color: lightblue;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
color: blue;
</style>
</head>
<body>
<div class="container">
<h2>Welcome to Itsourcecode!</h2>
<h3 id="myElement">This is an example that demonstrates how to use the add(), remove(), replace(), and toggle() methods of the classList property:</h3>
<button onclick="addClass()">Add Class</button>
<button onclick="removeClass()">Remove Class</button>
<button onclick="toggleClass()">Toggle Class</button>
<button onclick="replaceClass()">Replace Class</button>
<script>
// Get the element with the ID "myElement"
var element = document.getElementById("myElement");
function addClass() {
// Add the class "myClass" to the element
element.classList.add("myClass"); ✅
}
function removeClass() {
// Remove the class "myClass" from the element
element.classList.remove("myClass"); ✅
}
function toggleClass() {
// Toggle the class "myClass" on the element
element.classList.toggle("myClass"); ✅
}
function replaceClass() {
// Replace the class "myClass" with "newClass" on the element
element.classList.replace("myClass", "newClass"); ✅
}
</script>
</body>
</html>
Output:
Conclusion
To sum up, this article explains the usage of the classList.add() method in JavaScript for dynamically adding CSS classes to HTML elements.
The add() method of the classList property in JavaScript is used to add one or more class names to an element.
If the specified class value already exists in the element’s class attribute, the add() method will not add it again.
Aside from that, we also explore different usage of methods such as: remove(), replace(), a toggle() along with example codes and output.
We are hoping that this article provides you with enough information that helps you understand the classlist.add JavaScript.
If you want to dive into more JavaScript topics, check out the following articles:
Thank you for reading itsourcecoders 😊.