How to Easily Add or Toggle a Class on the Body Element in JavaScript
Adding a class to the <body> tag can be useful for applying global styles or targeting specific elements within the body for styling or functionality.
This article will teach us how to easily add or toggle a class on the HTML body element using JavaScript.
To add a class to the HTML body element in JavaScript on page load, call the classList.add() method on it, i.e., document.body.classList.add(element).
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="dev coding">
<div>This is a div element.</div>
</body>
</html>// Script
document.body.classList.add('class-3');The body property is the HTMLElement object that represents the body tag in the markup.
The classList property is a DOMTokenList object that represents the list of classes an element has.
The add() method of the classList property takes a list of classes and adds them to an element.
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="dev coding beauty">
<div>This is a div element.</div>
</body>
</html>You can pass multiple arguments to add() to add more than one class to the body. For example, we can add both beauty and magic to the body in single statement.
document.body.classList.add('beauty', 'magic');To produce this HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="dev coding beauty magic">
<div>This is a div element.</div>
</body>
</html>If you add class that already exists on the HTML body, add() ignores the class instead of throwing an exception.
Add class to body tag in <head> tag
To add a class to the body element in the <head> tag using JavaScript, use the DOMContentLoaded event and the document.body.classList.add() method.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.body.classList.add('beauty', 'magic');
});
</script>
</head>
<body class="dev coding">
<div>This is a div element.</div>
<script src="index"></script>
</body>
</html>The DOMContentLoaded event runs when the HTML is completely parse and the DOM has loaded.
The <script> loads and the JavaScript runs before the browser renders the HTML, so without DOMContentLoaded, document.body will be null in the <script>, causing the "Cannot read property 'classList' of undefined" JavaScript error.
Add class to body tag on click
If you’d like to add a class to the body tag when the user clicks an element, set a click listener on element and call document.body.classList.add() in this listener.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Coding Beauty Tutorial</title>
</head>
<body class="dev coding">
<div>So you can code</div>
<button class="amazify">Be amazing</button>
</body>
</html>const button = document.getElementById('amazify');
button.addEventListener('click', () => {
document.body.classList.add('amazify');
});Toggle class on body element
Toggling a class on the body element in JavaScript simplifies code implementation by handling the addition and removal of the class in a single line of code.
And this single line of code is a call to the body’s classList.toggle() method:
document.body.classList.toggle('incredible');As you would expect, the class is removed from the body when it’s already there and added when it isn’t.
Every Crazy Thing JavaScript Does
Just when you thought you knew all the quirks.
Avoid painful bugs and save valuable time with Every Crazy Thing JavaScript Does, a captivating guide to the subtle caveats and lesser-known parts of JavaScript.
Get a free copy here today.
Originally published at codingbeautydev.com
