How to Change Background Color using JavaScript

Even though CSS is the preferred language for making style changes, you can still make style changes using JavaScript.

A commonly-altered property is the background color of a page, as it can instantly change the entire look and feel of a website.

In this post, we'll look at how to use JavaScript to change the background color of a page or element.

Changing the Background Color of a Page

Every element has a style property, which is a JavaScript object that contains all of the CSS properties that can be applied to that element.

One of these properties is the background property, which is used to change the background color of an element.

To change the color of the background of the body, we can use the following code:

JAVASCRIPT
document.body.style.background = "blue";

Try this example for yourself:

Changing the Background Color of an Element

The body is just like any other element, meaning if you can change the background color of the body, you can change the background color of any element.

To change the background color of an element, first query for it.

JAVASCRIPT
const element = document.querySelector(".element");

Then, just like before, we can change the background color of the element using the background property:

JAVASCRIPT
element.style.background = "red";

Then, we can change the background color of the element using the style property.

JAVASCRIPT
element.style.background = "blue";

The attribute also supports hexadecimal colors as well:

JAVASCRIPT
element.style.background = "#00ff00";

Conclusion

In this post, we learned how to use JavaScript to change the background color of a body or any element.

Just get the element you want to change then set a new value on its style property.

Thanks for reading and happy coding!

• Support Us
• Discord
• Share
• Post
• Share