Skip to main content

How to Add or Remove a Class from the Body in JavaScript

Dynamically changing the class of the <body> element is a powerful technique for making global style changes to your web page. You can use it to switch between light and dark themes, show a modal overlay, or change the font for the entire page.

This guide will teach you the simple and modern way to manage classes on the <body> element. You will learn how to use the classList property with its add(), remove(), and toggle() methods, which is the recommended best practice for all class manipulation in JavaScript.

Accessing the <body> Element​

JavaScript provides a direct and convenient shortcut to the <body> element: the document.body property. You do not need to use querySelector or getElementById to access it.

// This is the easiest way to get the body element
const bodyElement = document.body;

How to Add a Class to the Body (classList.add())​

The classList property provides access to an element's list of classes. The add() method is used to add one or more classes.

Example: you want to change the background color of the entire page by adding a class to the <body>.

<style>
  .dark-theme {
    background-color: #222;
    color: #eee;
  }
</style>

A possible solution is:

// Add the 'dark-theme' class to the <body> element
document.body.classList.add('dark-theme');
note

This is a safe operation. If the class already exists, it will not be added a second time.

note

You can also add multiple classes at once by passing them as separate arguments.

document.body.classList.add('dark-theme', 'font-large', 'sidebar-open');

How to Remove a Class from the Body (classList.remove())​

Similarly, the remove() method is used to remove one or more classes.

The Problem​

The <body> element has a class that you want to remove.

<body class="loading-state">

The solution:

// Remove the 'loading-state' class from the <body> element
document.body.classList.remove('loading-state');

This is also a safe operation. If the class does not exist, the method does nothing and does not throw an error.

Like add(), you can remove multiple classes at once.

document.body.classList.remove('loading-state', 'sidebar-open');

How to Toggle a Class on the Body (classList.toggle())​

The toggle() method is a convenient shortcut that adds a class if it's missing, and removes it if it's present. This is perfect for features like opening and closing a menu or switching a theme on and off.

The solution:

// If 'menu-open' class is present, it will be removed.
// If 'menu-open' class is missing, it will be added.
document.body.classList.toggle('menu-open');

Why You Should Avoid Using className​

You may see older code examples that modify the className property directly. This method is not recommended and is a common source of bugs.

The Problematic className Method:

// This adds a class, but it's brittle.
document.body.className += ' new-class';

// This overwrites ALL existing classes with just one.
document.body.className = 'new-class';

Why this is bad:

  • It's Destructive: Overwriting className removes all other classes on the element.
  • It's Not Safe: It doesn't check if the class already exists, so you can easily end up with class="new-class new-class".
  • It's Clumsy: Removing a class requires complex string manipulation.
note

The classList property (add(), remove(), toggle()) is the modern, safe, and correct way to manage classes.

Practical Example: A Dark Mode Toggle Button​

This script demonstrates a real-world use case. Clicking a button toggles a dark-mode class on the <body> element.

The HTML:

<style>
  body.dark-mode {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
</style>

<button id="theme-toggle">Toggle Dark Mode</button>

The JavaScript:

const themeToggleButton = document.getElementById('theme-toggle');

themeToggleButton.addEventListener('click', () => {
  // Each click will add or remove the 'dark-mode' class
  document.body.classList.toggle('dark-mode');
});

Conclusion​

Manipulating the <body> element's classes is a simple but powerful technique for controlling the global appearance of your website.

  • Access the <body> element directly with the document.body property.
  • Use the classList property for all class manipulations, as it is safe and easy to use.
  • Use .add('class') to add a class.
  • Use .remove('class') to remove a class.
  • Use .toggle('class') for on/off functionality, like menus or themes.
  • Avoid using className, as it is an older, error-prone method.

Table of Contents