JavaScript Change Background Color | With Example for Beginner

JavaScript Change Background Color:-  We have to show you how to change the background with the example. And together we also show you how to do it in different ways.

So You can change the background color using javascript function. Below we have defined some point about it go and see your code with example

document.body.style.backgroundColor = "yellow";

JavaScript Change Background Color

We have given an example of the javascript code you can above. Now we have defined all about it and we can do it in many ways. As we know JavaScript is a client-side language.

So JavaScript has its own functions and syntax. By which we can change our page or block background color. We have shown you step by step all code with the example that how to use script and change background.

 

These are some lines about it 

  1.  change the background color of div
  2. change background using javascript function
  3. onclick change color javascript.
  4. change the background color on button click in javascript.
  5. javascript CSS background color.
  6. how to change background color of alert box in javascript.

 

javascript change background color of div

We can also change the background color from div and any block color change read more documentation using javascript. The style property can use any element like div, paragraph, and heading so on and also Link JavaScript to Html.

These are script language we can put code anywhere and showed output for it so many examples with using Html and element or javascript syntax.

document.getElementById("div").style.backgroundColor = "#ffffff";

 

<!DOCTYPE html>
<html>
<head>
  <title>Background color change </title>
</head>
<body>
<dir style="width:50%; height: 500px; border: 2px solid black">	
<div id="myids_color" style="width:50%; height: 500px;"></div>
</dir>
<script type="text/javascript">
document.getElementById("myids_color").style.backgroundColor = "yellow";

</script>
</body>
</html>

javascript change background color

Change Background Color using Function

As well as we have to change the background color using the function. Why do we use the function JavaScript is going to be a very important element. so we can use it anywhere by using it once.

With this, we can use it again anywhere on the page. Together with creating a function. we get a lot of help in the code and easily use only reduce time and code.

 

<script type="text/javascript">
document.getElementById("myids_color").style.backgroundColor = "yellow";
function color_change_function() {
  document.getElementById("myids_color").style.backgroundColor = "yellow";
}
</script>

 

onclick Change Color JavaScript

Moreover OnClick This is an event that we perform an event using on any element. we show it by using it with a function. This is our page which uses a lot of JavaScript events.

we use these elements like OnClick and onchange event. You can use this type of event to use anywhere with function. Let’s start we are using on click event with own function with an example below you can see our code and use it.

 

<!DOCTYPE html>
<html>
<head>
  <title>Background color change </title>
</head>
<body>
<dir style="width:50%; height: 500px; border: 2px solid black">	
<div id="myids_color" style="width:50%; height: 500px;"></div>
</dir>
<input type="submit" onclick="color_change_function()" name="">
<script type="text/javascript">

function color_change_function() {
  document.getElementById("myids_color").style.backgroundColor = "pink";
}

</script>
</body>
</html>

JavaScript Change Background Color

Change Background Color On Button Click in JavaScript

Similarly, we will also use the Javascript event on the button main event learn JQuery Radio Button Checked Event. we can use this event anywhere. We show you how to use a button event on page with the function and change background color change.

This is button code for onclick event.

onclick="background_color_change_function()"




function background_color_change_function() {
  document.getElementById("myids_color").style.backgroundColor = "pink";
}
<!DOCTYPE html>
<html>
<head>
  <title>color change </title>
</head>
<body>
<dir style="width:50%; height: 500px; border: 2px solid black">	
<div id="myids_color" style="width:50%; height: 500px;"></div>
</dir>

<button onclick="background_color_change_function()">Click me</button>
<script type="text/javascript">

function background_color_change_function() {
  document.getElementById("myids_color").style.backgroundColor = "pink";
}

</script>
</body>
</html>

Javascript CSS Background Color

Additionally, We also can use CSS code for changes background color. These are simple ways using it we show all code with the example about styling. you can see below the code and use easily our page there are mention all code.

style="background-color:#ffffff";

How to Change Background Color of Alert Box 

Now finally We are showing how to change alert box color. Similarly We about the alert box event and the syntax used in it.

<button onclick="alertbox()">click me </button>
<script type="text/javascript">

function alertbox() {
  alert('color change from alert');
}

</script>

Conclusion

We are providing many ways that how to use the script element and change the background color. if do you have any queries regarding it and any other issue relative.

we can provide code and suggest please ask everything about it. you can check some similar code pattern using jquery follow this link jQuery hasClass

 

 

 

Updated: November 5, 2019 — 5:43 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Learn Smart © 2019 Frontier Theme