| <html> |
| <head> |
| <style> |
| div { |
| width: 200px; |
| height: 200px; |
| border: 3px solid red; |
| text-align: center; |
| float: left; |
| } |
| </style> |
| <script> |
| a = "200px" |
| function f() |
| { |
| a = a=="200px" ? "350px" : "200px"; |
| document.getElementById("d").style.width=a; |
| document.getElementById("d").style.height=a; |
| } |
| |
| function t() |
| { |
| s = ""; |
| s += "col 1: " + document.getElementById("c1").offsetWidth + "\n"; |
| s += "col 2: " + document.getElementById("c2").offsetWidth + "\n"; |
| s += "col 3: " + document.getElementById("c3").offsetWidth + "\n"; |
| s += "row 1: " + document.getElementById("r1").offsetHeight + "\n"; |
| s += "row 2: " + document.getElementById("r2").offsetHeight + "\n"; |
| s += "row 3: " + document.getElementById("r3").offsetHeight + "\n"; |
| alert(s); |
| } |
| </script> |
| </head> |
| <body> |
| <table border="1"> |
| <tr> |
| <td></td> |
| <td id="c1">col 1</td> |
| <td width="50" id="c2">col 2</td> |
| <td id="c3">col 3</td> |
| </tr> |
| <tr> |
| <td id="r1">row 1</td> |
| <td rowspan=3 colspan=3> |
| <div id="d">tjosan</div> |
| </td> |
| </tr> |
| <tr> |
| <td height="50" id="r2">row 2</td> |
| </tr> |
| <tr> |
| <td id="r3">row 3</td> |
| </tr> |
| </table> |
| <input type="button" onClick="f();" value="expand"> |
| <input type="button" onClick="t();" value="sizes"> |
| </body> |
| </html> |
