In this article i will tell you how you can change the background of the page using javascript.

First i have made 4 buttons and put the value of these buttons as Red, green, blue and yellow. Then i write javascript code in onclick attribute which changes the background color when the user click on the page. I have used javascript:document.bgColor in the onclick action and assign some color to it like #ff0000 for red.

change-background

change-background

The source code of the file looks like this:-

<!DOCTYPE HTML>
<html>
<head>
<title>Change background of page</title>
<style type="text/css">
	#content{
		margin:0px auto;
		width:250px;
		height:30px;
		padding:30px;
		background-color:#CCC;	
	}
</style>
</head>

<body>
<div id="content">
 <input type="button" value="Red" 
onclick="javascript:document.bgColor='#ff0000'">
 <input type="button" value="Green"
 onclick="javascript:document.bgColor='#00ff00'">
 <input type="button" value="Blue" 
onclick="javascript:document.bgColor='#0000ff'">
 <input type="button" value="Yellow" 
onclick="javascript:document.bgColor='#ffff00'">
</div>
</body>

</html>