Adding a class to an element in HTML is a common way to style that element with CSS. Adding class to body in JavaScript is easy. In this tutorial, you will learn how to add class to body in JavaScript, using two ways. You will also learn how to remove a class from a body element (or multiple elements) in JavaScript.
Let’s get started!
Add Class To A Body Element In JavaScript Using ClassName Property
The className property is used to add a class to an element in JavaScript.
This property is used with the HTML DOM and allows you to manipulate the class of an element.
The className property can be used to add multiple classes to an element, just like the class attribute in HTML.
To add a class to an element, you just need to set the className property to a string containing the class name.
For example, if you wanted to add the “active” class to the body element, you would do the following:
document.body.className = "active";If the body element already has a class, it will be overridden.
So, if the body element has the “main” class and you add the “active” class, the body element will now have the “active” class only.
You can also add multiple classes to an element by setting the className property to a string containing multiple class names, separated by spaces.
For example, if you wanted to add the “active” and “highlight” classes to the body element, you would do the following:
document.body.className = "active highlight";To add classes to a body element without overriding any existing classes, you can use the += operator.
For example, if you wanted to add the “active” class to the body element without overriding any existing classes, you would do the following:
document.body.className += "active";This would add the “active” class to the list of classes on the body element, without removing or replacing any other classes.
You can also use the className property to remove a class from an element.
To remove a class from an element, you just need to set the className property to a string containing the class name that you want to remove.
For example, if you wanted to remove the “active” class from the body element, you would do the following:
document.body.className = "";You can add multiple classes, without removing the old classes, by using the same += operator as follows –
document.body.className += " class1 class2″;This would add the “class1” and “class2” classes to the list of classes on the body element, without removing or replacing any other classes.
Problems With The ClassName Property
There are a few problems with using the className property to add and remove classes.
The first problem is that it overrides any existing classes on the element.
If you want to add a new class without removing the old classes, you have to use the += operator, as we saw earlier.
The second problem is that there is no check in place to make sure that a new class is added only if it doesn’t exist already.
So, if you use the += operator to add a new class and that class already exists on the element, it will be added twice.
The third problem is that it can be tricky to work with if you want to add or remove multiple classes at once.
To solve these issues, we use the classList property in JavaScript.
Add Class To A Body Element In JavaScript Using ClassList Property
One of the most common tasks in web development is adding class names to elements. This can be done in JavaScript using the classList property.
classList is a read-only property that returns a live DOMTokenList of the class attributes of the element. This can be used to add, remove, or toggle class names on an element.
To add a class name, you can use the add() method. This takes one or more class names as arguments and adds them to the element’s class list. For example –
var el = document.getElementById("some-element");
el.classList.add("class-name");To remove a class name, you can use the remove() method. This also takes one or more class names as arguments and removes them from the element’s class list. For example:
var el = document.getElementById("some-element");
el.classList.remove("class-name");You can also check if an element contains a class in JavaScript using the contains() method. This returns a Boolean value indicating whether the class exists in the element’s class list. For example:
var el = document.getElementById("some-element");
if (el.classList.contains("class-name")) {
// The element has the class name "class-name"
} else {
// The element does not have the class name "class-name"
}Finally, to toggle a class name, you can use the toggle() method. This takes a class name as an argument and adds it if it is not present, or removes it if it is present. For example:
var el = document.getElementById("some-element");
el.classList.toggle("class-name");Note that all of these methods can take multiple class names as arguments. For example, to add two classes at once, you would use the following:
var el = document.getElementById("some-element");
el.classList.add("class-name-1", "class-name-2");You can also add a class to a body element when any event occurs on the page. For example, you could add a class when the page is loaded, or when a button is clicked. To do this, you would use an event listener.
For example, to add a class when the page is loaded, you could use the DOMContentLoaded event:
document.addEventListener("DOMContentLoaded", function() {
document.body.classList.add("loaded");
});Or, to add a class to a body when a button is clicked, you could use the click event:
var el = document.getElementById("some-element");
el.addEventListener("click", function() {
document.body.classList.add("clicked");
});Supported Browsers
The classList property is supported in all major browsers – Google Chrome, Microsoft Edge, Internet Explorer, Firefox, Opera, Safari.
Adding Classes To Multiple Elements At Once
In some cases, you may want to add the same class to multiple elements on the page. This can be done using a loop. For example, if you have a list of elements with the class name “example”, you can use a loop to add another class to all of them:
var els = document.getElementsByClassName("example");
for (var i = 0; i < els.length; i++) {
els.item(i).classList.add("new-class");
}This will add the class “new-class” to all elements with the class “example”. You can also use this technique to remove or toggle classes on multiple elements at once.
In case the new-class was the first class to be added to the elements, and you want to remove it, you can use the classList.value property:
els.forEach(el => el.classList.remove(el.classList.value));This will remove all classes from the elements, including the “example” class.
You can use the querySelectorAll method to select all elements that match a given CSS selector. For example, to select all elements with the class “example”, you would use the following:
var els = document.querySelectorAll(".example");This can be useful if you want to add or remove classes based on a certain criteria. For example, you could add a class to all elements with the class “example” that also have the “data-id” attribute:
var els = document.querySelectorAll(".example");
for (var i = 0; i < els.length; i++) {
if (els.item(i).hasAttribute("data-id")) {
els.item(i).classList.add("new-class");
}
}This will add the class “new-class” to all elements with the class “example” that also have the “data-id” attribute.
Again, you can add many classes at once using the add() method, or remove all classes using the remove() method.
For example, to add three classes at once, you would use the following:
var els = document.querySelectorAll(".example");
for (var i = 0; i < els.length; i++) {
if (els.item(i).hasAttribute("data-id")) {
els.item(i).classList.add("class-name-1", "class-name-2", "class-name-3");
}
}Or, to remove two classes at once, you would use the following:
var els = document.querySelectorAll(".example");
for (var i = 0; i < els.length; i++) {
if (els.item(i).hasAttribute("data-id")) {
els.item(i).classList.remove("class-name-1", "class-name-2");
}
}Or, to toggle a class on all elements, you would use the following:
var els = document.querySelectorAll(".example");
for (var i = 0; i < els.length; i++) {
if (els.item(i).hasAttribute("data-id")) {
els.item(i).classList.toggle("new-class");
}
}This will add the class “new-class” to all elements that don’t have it, and remove it from all elements that do have it.
You can use the querySelectorAll method to get collection of elements with multiple classes. For example, to get all elements that have both the class “example” and the class “new-class”, you would use the following:
var els = document.querySelectorAll(".example, .new-class");Now, you can add new classes or remove existing classes from all elements in the collection.
For example, to add a third class to all elements that have both the class “example” and the class “new-class”, you would use the following:
els.forEach(el => el.classList.add("third-class"));Or, to remove the class “new-class” from all elements that have both the class “example” and the class “new-class”, you would use the following:
els.forEach(el => el.classList.remove("new-class"));As you can see, there are many ways to add classes to elements using JavaScript. You can use a loop or the querySelectorAll method to select the elements, and then use the classList methods to add, remove, or toggle classes.
Experiment with different combinations to find the one that best suits your needs.
Conclusion – Add Class To Body JavaScript
This article has shown how to add, remove, and toggle classes on elements using the classList property and the className property. You can also use the property to add, remove, and toggle multiple classes at once.
You can also use querySelectorAll to select all elements that match a given CSS selector, which can be useful for adding or removing classes based on certain criteria.