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

03 Aug, 2021
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.
<!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>                    
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.
<!DOCTYPE HTML> <html>     <head>         <title>             How to change the background color after            clicking the button in jQuery ?        </title>                  <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
JavaScript-Misc
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?