How to Set Styles on the <body> Element in JavaScript

Styling the <body> element is a common task for making global changes to a webpage, such as setting a background color, changing the default font, or adjusting margins. In JavaScript, you can access and modify these styles directly through the document.body object.

This guide will teach you the standard method for setting CSS properties on the <body> element using its style object. You will also learn the important distinction between setting styles and reading them.

The Core Method: document.body.style

The document.body property provides a direct reference to the <body> element of the current page. From there, you can access its style property, which corresponds to the element's inline style attribute.

Any property you set on document.body.style will be applied as an inline style, which has a high specificity and will override styles defined in your external stylesheets.

How to Set CSS Properties

To set a style, you assign a string value to a property on the style object.

Syntax:

document.body.style.propertyName = 'value';

Problem: you want to change the background color and text color of the entire page.

Solution:

// Set the background color of the body
document.body.style.backgroundColor = 'black';

// Set the text color for the body and its descendants
document.body.style.color = 'white';

// Set the margin
document.body.style.margin = '20px';

How to Remove a Style

To remove an inline style you have set, you can either set its value to null or an empty string ('').

// This will remove the inline background color, reverting to the stylesheet's rule.
document.body.style.backgroundColor = null;

How to Read CSS Properties

Reading styles can be tricky.

• element.style.propertyName: This will only read styles that have been set inline (either in the HTML style="..." attribute or with JavaScript). It will not see styles from an external CSS file.
• window.getComputedStyle(element): This is the correct method for getting the actual, final style of an element after all stylesheets have been applied.

Problem: you want to know the current font size of the <body>, which is set in a CSS file.

// This will return an empty string because the font-size is not an inline style.
console.log(document.body.style.fontSize); // Output: ""

Solution:

// This correctly gets the final, computed style from any source (stylesheet, browser default, etc.).
let computedStyles = window.getComputedStyle(document.body);
let currentFontSize = computedStyles.fontSize;

console.log(currentFontSize); // Output: e.g., "16px"

Practical Example: A "Dark Mode" Toggle

This is a classic use case for manipulating the <body> styles. A button toggles the background and text color for the entire page.

HTML:

<button id="theme-toggle">Toggle Dark Mode</button>
<p>Some content on the page.</p>

JavaScript:

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

themeToggleButton.addEventListener('click', () => {
  // Check the current background color to determine the state
  let isDarkMode = document.body.style.backgroundColor === 'black';
  
  if (isDarkMode) {
    // Switch to Light Mode
    document.body.style.backgroundColor = 'white';
    document.body.style.color = 'black';
    themeToggleButton.textContent = 'Enable Dark Mode';
  } else {
    // Switch to Dark Mode
    document.body.style.backgroundColor = 'black';
    document.body.style.color = 'white';
    themeToggleButton.textContent = 'Disable Dark Mode';
  }
});

Conclusion

Setting styles on the <body> element is a simple and powerful way to make global changes to your page's appearance.

• The standard method is to use the document.body.style object.
• Remember to convert CSS property names from kebab-case (background-color) to camelCase (backgroundColor) when setting them in JavaScript.
• To read the final, active style of an element, always use window.getComputedStyle(element), as element.style only returns inline styles.