CSS特效赏析

15、动态改变页面样式

我们先来看一下下面这个例子吧，请您用鼠标点击表格中相应的部分看效果。

　　通过点击表格中对应的部分，是表格上方的时钟样式发生了相应的改变。
　　其实，这种效果的实现很简单，那个时钟是用JavaScript实现的。而下面的这个表格的实现代码是这样的：

　　<p id="Clock" align="center"></p>
　　//*引入时钟*//
　　<table border="1px" align="center">
　　<tr> <td class="p2">时钟颜色</td>
　　　　 <td class="p2">时钟背景</td>
　　　　 <td class="p2">时钟字体</td>
　　　　 <td class="p2">字体尺寸</td>
　　<td class="p2">字体粗细</td> </tr>
　　<tr> <td colspan="5" height="3px"> </td> </tr>
　　<tr> <td class="p2">
　　<span onmouseover="this.style.cursor='hand'"
　　　　　onmouseout="this.style.cursor=default"
　　　　　onclick="Clock.style.color='purple'">紫色</span>
　　</td>
　　//*设置鼠标事件，鼠标放上、离开、点击时的状态*//
　　<td class="p2">
　　<span onmouseover="this.style.cursor='hand'"
　　　　　onmouseout="this.style.cursor=default"
　　　　　onclick="Clock.style.background='red'">红色</span>
　　</td>
　　……
　　//*省略号代表的代码和“紫色”、“红色”的定义是类似的*//

　　本节就介绍到这里，下一节将向您介绍一个动态时钟转换的例子。