JavaScript change background color

What you will learn here about JavaScript:
  • JavaScript change background color on button click
  • JavaScript change background color on mouseover
  • JavaScript change background color dynamically
  • JavaScript change background image on click
  • JavaScript change background image of div
  • JavaScript change background image on hover

JavaScript change background color on button click


<button onclick="changeColor()">Click me</button>
<script>
function changeColor()
{
document.getElementById("result").style.background="green";
}
</script>

JavaScript change background color on mouseover

<div id="result" style="width:100%;height:45px;background-color:pink;" onmouseover="changeColor();"></div>
<script>
function changeColor()
{
document.getElementById("result").style.background="green";
}
</script>

JavaScript change background color dynamically


<button onclick="changeColor()">Click me</button>
<script>
function changeColor()
{
var R=Math.floor(Math.random() * 255);
var G=Math.floor(Math.random() * 255);
var B=Math.floor(Math.random() * 255);
document.getElementById("result").style.background="rgb("+R+","+G+","+B+")";
}
</script>

JavaScript change background image on click



<img id="sample" src="https://bytesofgigabytes.com/IMAGES/css/background/src1.jpg" width="450px" height="275px">
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>

JavaScript change background image of div


<button onclick="changeImage()">Click me</button>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>

JavaScript change background image on hover

<div style="width:475px;height:275px;" onmouseover="changeImage()"><img id="sample" src="src1.JPG" style="width:100%; height:100%;"> </div>
<script>
function changeImage()
{
document.getElementById('sample').src="https://bytesofgigabytes.com/IMAGES/css/background/src2.jpg"
}
</script>

You may also like...