Changing an element's background color
Changing the page's background color requires a very simple script:
Head:
<script language="JavaScript">
function changeBGC(color) {
document.body.style.backgroundColor = color;
}
</script>
Body:
<a href="javascript:;" onMouseOver="javascript:changeBGC('#ccc');return false", onMouseOut="javascript:changeBGC('#fff');return false"" >Make background gray</a>
This is the same script using styled divs as triggers and onClick instead of onMouseOver:
Head:
<script language="JavaScript">
function changeBGC(color) {
document.body.style.backgroundColor = color;
}
</script>
Body (only one button as example):
<style type="text/css" media="screen">
.bluebutton {
color: #fff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #009;
border-color: #000; }
</style>
<form>
<input class="bluebutton" type='button' value='Blue Background'
onClick="javascript:changeBGC('#009');return false">
</form>
This is a similar application that changes the background color of a structural element (in this case a div but could be any other structural element) rather than the whole document:
Body:
<a href="javascript:var thediv=document.getElementById
('div9').style; thediv.backgroundColor='#fff'; void(0);" style="color: #000; background: #fff; border: 1px solid #000; padding: 2px; font-size: 9px; ">White</a>
<a href="javascript:var thediv=document.getElementById
('div9').style; thediv.backgroundColor='#999'; void(0);" style="color: #fff; background: #999; border: 1px solid #000; padding: 2px; font-size: 9px; ">Gray</a>
<a href="javascript:var thediv=document.getElementById
('div9').style; thediv.backgroundColor='#000'; void(0);" style="color: #fff; background: #000; border: 1px solid #999; padding: 2px; font-size: 9px; ">Black</a><br />
