Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the background color after clicking the button in JavaScript?
The style.backgroundColor property is used to change the element color, and it returns the string value, which represents the color of the background. Transparent is the default value of these color property. Here we use the onclick event to make changes effective after clicking the button.
As we know, the onclick event occurs only when a user clicks the elements and it is a purely JavaScript attribute. Whenever you click on the onclick event it does some actions like displaying a message or redirects the user another page. The onclick event must be used very less in the website, because it may create the confuse to the users. So, use these event very wisely.
In this article, we are going to see how can we change the background color after clicking the button in JavaScript.
Syntax
The following is the syntax for the changing the color of the background after clicking the button using the JavaScript −
document.getElementById('id').style.backgroundColor = 'color';
Parameters
backgroundColor – To change the color of the background.
getElementById – To read and edit the specific HTML Elements.
color – Used to define the color for display.
Steps
Follow the below-given steps to change the background color after clicking the button in JavaScript −
Step 1 − Let’s define the style for the div id of the HTML Document which is going to change the color of the background after clicking the button. For a DIV element, we defined the height, width and background-color.
Step 2 − Under the div section, we defined the form, button and script elements.
Step 3 − For the button element, the changeBackgroundColor() method is defined. Using this method color will be changed when we press the button.
Step 4 − In changeBackgroundColor() method, the id, and color is mentioned clearly for which method functionality should be performed.
Step 5 − The style.backgroundColor is the HTML DOM background property used to change the background color.
Step 6 − After clicking the button, the onClick event function is triggers and it changes the color from white to lightblue.
Example
In this example, we are going to change the background color after clicking the button with the help of JavaScript.
<html>
<head>
<style>
#divsection {
width: 650px;
background-color: white;
height: 500px;
}
</style>
</head>
<body>
<h2>Changing the Background Color when we click on button</h2>
<div id="divsection">
<p> This is the demo text. </p>
<button onclick="changeBackgroundColor()">
Press it to change Background Color
</button>
<!-- Script functionality of backgroundColor property-->
<script>
function changeBackgroundColor() {
document.getElementById("divsection").style.backgroundColor = "lightblue";
}
</script>
</div>
</body>
</html>
Using jQuery to Change the Background Color
Please follow the below-given steps to change the background color after clicking the button using jQuery −
Step 1 − The source of jQuery is defined under the Script section of the header tag.
Step 2 − The button element is declared, which will be change its color when we press it.
Step 3 − Inside the Script section, we defined the jQuery functionality for the background color change.
Step 4 − You can change the color of the background for a selected element by using the jQuery selector along with the CSS method.
Step 5 − The example will change the color of the background to red, and you can trigger the color change by using the click event handler.
Example
In this example, we are going to change the background of the color after clicking the button using jQuery.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h2>Changing the Background Color Using jQuery</h2>
<button>Press it to change Background Color</button>
<!--Defining the functionality of jQuery with background color property-->
<script>
$('button').on('click', function() {
$('body').css('background', 'red');
});
</script>
</body>
</html>
In this article, we have demonstrated how to change the background color after clicking the button along with examples. We have seen the two different examples here, in the first example, we changed the color for the background after button is clicked using the JavaScript. In the second example, we changed the color of the background once we click the button using the jQuery.
13K+ Views
