How to change the background color after clicking the button in JavaScript ?

Given an HTML document and the task is to change the background color of the document using JavaScript and jQuery.

Approach 1: This approach uses JavaScript to change the background color after clicking the button.
Use HTML DOM Style backgroundColor Property to change the background color after clicking the button. This property is used to set the background-color of an element.

Example: This example changes the background color with the help of JavaScript.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            How to change the background color
            after clicking the button ?
        </title>
    </head
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <p id = "GFG_UP" style =
            "font-size: 16px; font-weight: bold;">     
        </p>
          
        <button onclick = "gfg_Run()"
            Click here
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var str = "Click on button to change the background color";
          
            el_up.innerHTML = str;
          
            function changeColor(color) {
                document.body.style.background = color;
            }
              
            function gfg_Run() {
                changeColor('yellow');
                el_down.innerHTML = "Background Color changed";
            }         
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2: This approach uses jQuery to change the background color after clicking the button.

  • The text() method is used to set the text content to the selected element.
  • The on() method is used as event handlers for the selected elements and child elements.
  • The css() method is used to change/set the background color of the element.

Example: This example changes the background color with the help of JQuery.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            How to change the background color after
            clicking the button in jQuery ?
        </title>
          
        <script src =
        </script>
    </head
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1
          
        <p id = "GFG_UP" style
            "font-size: 16px; font-weight: bold;">     
        </p>
          
        <button
            Click here
        </button>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            $('#GFG_UP').text("Click on button to change the background color");
            $('button').on('click', function() {
                $('body').css('background', '#ccc');
                $('#GFG_DOWN').text("Background Color Changed!");
            }); 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.