Set styles on the Body Element using JavaScript

# Set styles on the Body Element using JavaScript

To set styles on the body element:

Use the document.body property to access the body element.
Set properties on the style object of the element to update its styles.
For example, document.body.style.backgroundColor = 'lime'.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="
        background-color: salmon;
        width: 150px;
        height: 150px;
      "
    >
      Hello world
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ set styles on the body element
document.body.style.backgroundColor = 'lime';
document.body.style.color = 'white';

set styles on body element using javascript

The code for this article is available on GitHub

The document.body property represents the body element of the current document.

We used the style object to set CSS properties on the body.

If you need to remove a specific CSS property from the element, set it to an empty string.

index.js

Copied!
// ✅ set styles on the body element
document.body.style.backgroundColor = 'lime';
document.body.style.color = 'white';

// ✅ remove styles from the body element
document.body.style.backgroundColor = '';

Note that multi-word property names are camel-cased when using the style object.

# Set styles on the body element using setProperty()

If you don't like CSS property names being camel-cased, you can use the setProperty() method instead.

index.js

Copied!
document.body.style.setProperty('background-color', 'lime');
document.body.style.setProperty('color', 'white');

set styles on body element using setproperty

The setProperty() method takes the following 3 parameters:

propertyName - the name of the CSS property we want to modify. Note that property names of multiple words must be hyphenated.
value - the new value for the CSS property.
priority - can be set to important or an empty string.

# Read CSS property values from the body element

You can also use the style object to read CSS property values from the body element.

index.js

Copied!
document.body.style.backgroundColor = 'lime';

// ✅ read styles of the body element
console.log(document.body.style.backgroundColor); // 👉️ "lime"

// 👇️ "16px"
console.log(window.getComputedStyle(document.body).fontSize);

read css property values from body element

The code for this article is available on GitHub

The first example reads the value of the background color property on the body element.

However, this wouldn't work if the property was not set as an inline style on the element.

If you need to consider styles set in an external stylesheet, use the window.getComputedStyle() method instead.

index.js

Copied!
document.body.style.backgroundColor = 'lime';

// 👇️ "16px"
console.log(window.getComputedStyle(document.body).fontSize);

The code for this article is available on GitHub

The getComputedStyle method returns an object that contains the values of all CSS properties of the passed-in element, after applying stylesheets.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Set styles on the Body Element using JavaScript