Using the style object to dynamically change page
content.
For this section I'm going to demonstrate how to use
the style object in your web pages. I'm going to create a table and use
a few buttons to dynamically change the page using the style object. The
table has 9 individual cells, to change the background color of the cells
click the change color buttons, to change the position click the Change
Position button. The default color and position is a grey background
with the left position. You
can see the script below:
Offense
Defense
Coaches
Clinton Portis
Sean Taylor
Joe Gibbs
Santana Moss
Chris Samuels
Greg Williams
Change Position:
Change Color:
Now here is the code and comments:
<script type="text/javascript"><!--
//Assigns the variable table to the
element id and then
// moves the table "tableMain" to the right by 100 pixels
// Assuming the table is at left position 0 pixels. Else it does
nothing.
function tableRight(){
var table = document.getElementById("tableMain");
table.style.left = "100px";
}
// Assigns the variable table to the element id and then
// moves the table to the 0 pixels position.
// Assuming it is not there already.
function tableLeft(){
var table = document.getElementById("tableMain");
table.style.left = "0px";
}
//Assigns the variable table to the table element id and
then.
// changes the table background color by getting the
//value that is returned as a result of the button click.
function changeTColor(col){
var table = document.getElementById("tableMain");
table.style.backgroundColor = col;
}//-->
</script></head><body>
// *Note: The id element is being defined here.
<table id="tableMain" cellspacing="2" cellpadding="2" border="1"
style="position:relative;background-color:#cccccc">
// The table cells are created and assigned a value here.
<tr>
<td>Offense</td>
<td>Defense</td>
<td>Coaches</td>
</tr><tr>
<td>Clinton Portis</td>
<td>Sean Taylor</td>
<td>Joe Gibbs</td>
</tr><tr>
<td>Santana Moss</td>
<td>Chris Samuels</td>
<td>Greg Williams</td>
</tr></table><br>
// These buttons trigger the onclick event for the
appropriate //functions that will move the table right or left.
<p>Change Position:<br>
<button onclick="tableRight();">right 100px</button>
<button onclick="tableLeft();">left 100px</button></p>
// These buttons change the color to the selected value by
triggering //onclick event to change the table color using the
changeTColor //and passing the color value to Red, Green, Blue
or Grey
