WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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

Topic: JavaScript / jQueryPrev|Next

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:

<!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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties