Given an HTML document, 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.
html
<!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;"> neveropen </h1> <h3> Click on button to change the background color </h3> <button onclick="myFunc()"> Click here </button> <h2 id="GFG" style="color:green;"></h2> <script> let result = document.getElementById("GFG"); function changeColor(color) { document.body.style.background = color; } function myFunc() { changeColor('yellow'); result.innerHTML = "Background Color changed"; } </script></body></html> |
Output:
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.
html
<!DOCTYPE HTML><html><head> <title> How to change the background color after click on button in jQuery ? </title> <script src= </script></head><body style="text-align:center;"> <h1 style="color:green;"> neveropen </h1> <h3> Click on button to change the background color </h3> <button> Click here </button> <h2 id="GFG" style="color:green;"></h2> <script> $('button').on('click', function () { $('body').css('background', '#ccc'); $('#GFG').text("Background Color Changed!"); }); </script></body></html> |
Output:
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 for it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
