How to change the background color of a web page dynamically using JavaScript

Answer: Use the JavaScript `style` property

You can easily change the background color of a webpage i.e. the <body> element or any other element dynamically by using its style property in JavaScript.

The style property is used to get as well as set the inline style of an element. Typically, any HTML element that supports the style attribute also has a style property. Here's an example:

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Background Color with JavaScript</title>
<script>
    // Function to change webpage background color
    function changeBodyBg(color){
        document.body.style.background = color;
    }
    
    // Function to change heading background color
    function changeHeadingBg(color){
        document.getElementById("heading").style.background = color;
    }
</script>
</head>
<body>
    <h1 id="heading">This is a heading</h1>
    <p>This is a paragraph of text.</p>
    <hr>
    <div>
        <label>Change Webpage Background To:</label>
        <button type="button" onclick="changeBodyBg('yellow');">Yellow</button>
        <button type="button" onclick="changeBodyBg('lime');">Lime</button>
        <button type="button" onclick="changeBodyBg('orange');">Orange</button>
    </div>
    <br>
    <div>
        <label>Change Heading Background To:</label>
        <button type="button" onclick="changeHeadingBg('red');">Red</button>
        <button type="button" onclick="changeHeadingBg('green');">Green</button>
        <button type="button" onclick="changeHeadingBg('blue');">Blue</button>
    </div>
</body>
</html>

Related FAQ

Here are some more FAQ related to this topic:

Previous Page Next Page

How to change the background color of a web page dynamically using JavaScript

Answer: Use the JavaScript style property

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Use the JavaScript `style` property