To remove a class from the body element, call the classList.remove() method on the body element, e.g, document.body.classList.remove('the-class)'.
Here is some sample HTML:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="class-1 class-2">
<div>This is a div element.</div>
<script src="index.js"></script>
</body>
</html>
Here’s how we can remove the class class-1 from the body using JavaScript:
index.js
document.body.classList.remove('class-1');
We use the body property of the document to access the HTMLElement object that represents the document body.
The classList property returns a DOMTokenList object that represents the list of classes an element has.
The remove() method of the classList property takes a list of classes and removes them from an element.
After removing class-1, the document markup will look like this:
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="class-2">
<div>This is a div element.</div>
<script src="index.js"></script>
</body>
</html>
We can pass multiple arguments to the remove() method to remove more than one class from the body. For example, we can remove both class-1 and class-2 from the body using a single statement:
index.js
document.body.classList.remove('class-1', 'class-2');
This will be the resulting document markup:
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body>
<div>This is a div element.</div>
<script src="index.js"></script>
</body>
</html>
If we pass a class that the element does not have, remove() ignores the class and does not throw an error.
Add class to body with JavaScript
To add a class to the body element instead, we can use the classList.add() method of the body object.
index.js
document.body.classList.add('class-3', 'class-4');
The add() method of the classList property takes a list of class names and adds them to an element.
This will be the resulting HTML after adding the two classes:
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="class-1 class-2 class-3 class-4">
<div>This is a div element.</div>
<script src="index.js"></script>
</body>
</html>
add() prevents the same class from being added to an element multiple times, so a specified class is ignored if the element already has it.
Every Crazy Thing JavaScript Does
A captivating guide to the subtle caveats and lesser-known parts of JavaScript.
