Dynamically change body background color using javascript:
This is the sample code for Dynamically change the body/div/text background color using javascript. By using this code you can change the text color while the background changed dynamically.
Code:
<html>
<head>
<title>Dynamically change background color</title>
<script language="javascript" type="text/javascript">
var count=0;
function changeColor()
{
setTimeout("showColorChange()",500);
}
function showColorChange()
{
var bg =new Array("red","darkblue","sky","yellow","blue","pink","green");
var txt =new Array("black","white","green","blue","pink","red","yellow");
if(count<=6)
{ document.getElementById("divChangeColor").style.backgroundColor=bg[count++];
document.getElementById("txtChangeColor").style.color=txt[count++];
setTimeout("showColorChange()",500);
}
else
{
count=0;
changeColor();
}
}
</script>
</head>
<body onload="changeColor()">
<div id="divChangeColor" style="width: 300px; height: 300px; background-color: Gray">
<span id="txtChangeColor"><b>Look at me & my background</b></span>
</div>
</body>
</html>
<head>
<title>Dynamically change background color</title>
<script language="javascript" type="text/javascript">
var count=0;
function changeColor()
{
setTimeout("showColorChange()",500);
}
function showColorChange()
{
var bg =new Array("red","darkblue","sky","yellow","blue","pink","green");
var txt =new Array("black","white","green","blue","pink","red","yellow");
if(count<=6)
{ document.getElementById("divChangeColor").style.backgroundColor=bg[count++];
document.getElementById("txtChangeColor").style.color=txt[count++];
setTimeout("showColorChange()",500);
}
else
{
count=0;
changeColor();
}
}
</script>
</head>
<body onload="changeColor()">
<div id="divChangeColor" style="width: 300px; height: 300px; background-color: Gray">
<span id="txtChangeColor"><b>Look at me & my background</b></span>
</div>
</body>
</html>
Demo:
Look at me & my background
Posts
0 comments:
Post a Comment
Share your thoughts here...