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.
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>
