Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to Change the Background Color after Clicking the Button in JavaScript?

Javascript Web Development Front End Technology

To change the background color after clicking the button in JavaScript, we are going to discuss two different approaches. We have to perform two simple tasks: adding a click event listener and changing the background color of the document.

In this article our task is to understand how to change the background color after clicking the button in JavaScript.

Approaches to Change Background Color on Clicking Button

Here is a list of approaches to change the background color after clicking the button in JavaScript which we will be discussing in this article with stepwise explanation and complete example codes.

Using backgroundColor Property

To change the background color after clicking the button in JavaScript, we can use the backgroundColor property of the DOM style object.

  • We use body as the element selector to set the text color and background-color of the HTML document.
  • We add a button that triggers the chngColor() function upon clicking.
  • The chngColor() function uses the DOM style object backgroundColor property to change the background color of the HTML document.

Example

Here is a complete example code implementing the above steps to change the background color after clicking the button using the backgroundColor property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Changing the background color after clicking 
        the button in JavaScript
    </title>
    <style>
        body {
            background-color: #04af2f;
            color: white;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #ffffff;
            color: #333;
        }
        button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h2>
        Changing the Background Color After Clicking 
        the Button in JavaScript
    </h2>
    <p>
        In this example we use the DOM style object 
        <strong>backgroundColor</strong> property
        to change the background color after clicking 
        the button.
    </p>
    <button onclick="chngColor()">Change Color</button>
    <br><br>
    <div id="container">
        Click on the button to change the background color
        of the document.
    </div>
    
    <script>
        function chngColor() {
            document.body.style.backgroundColor = "#031926";
        }
    </script>
</body>
</html>

Output

When you click the "Change Color" button, the background color changes from green (#04af2f) to dark blue (#031926).

Using jQuery

In this approach to change the background color after clicking the button, we use jQuery. jQuery is a fast and concise JavaScript library with the motto: "Write less, do more."

  • The jQuery library is included using a script tag in the header section.
  • We use body as the element selector to set the text color and background color of the HTML document.
  • We add a button to change the background color upon clicking.
  • The $('button') selector targets the button and the on() method adds an event listener. We attach a click event.
  • The callback function selects the body element to modify the CSS using the css() method. The background property changes the color of the HTML document.

Example

Here is a complete example code implementing the above steps to change the background color after clicking the button using jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Changing the background color after clicking 
        the button in JavaScript
    </title>
    <style>
        body {
            color: white;
            background-color: #04af2f;
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #ffffff;
            color: #333;
        }
        button:hover {
            background-color: #f0f0f0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <h2>
        Changing the Background Color After Clicking 
        the Button in JavaScript
    </h2>
    <p>
        In this example we use <strong>jQuery</strong> 
        to change the background color after clicking 
        the button.
    </p>
    <button>Change Color</button>
    
    <script>
        $('button').on('click', function () {
            $('body').css('background', '#031926');
        });
    </script>
</body>
</html>

Output

Similar to the previous example, clicking the button changes the background color from green to dark blue, but this time using jQuery's CSS manipulation methods.

Comparison

Method Dependencies Code Length Performance
Vanilla JavaScript None Short Fast
jQuery jQuery library Shorter syntax Slightly slower

Conclusion

Both methods effectively change the background color when a button is clicked. The vanilla JavaScript approach is lighter and faster, while jQuery provides cleaner syntax at the cost of an additional library dependency.

Updated on: 2026-03-15T23:19:01+05:30

20K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements