3.5 在脚本中修改显示样式

在很多情况下，需要使用脚本来动态控制页面的显示效果，实现起来也很简单，只需要在脚本中获取到该元素，然后修改它的CSS样式就可以了。

3.5.1 随机改变页面的背景色

随机改变页面的背景颜色很简单，这里我们使用“rgb（a,b,c）”属性来实现，只需要随机生成a、b、c的值就可以了，a、b、c取值在0～256，具体请看下面的实例。

【例3-8】（实例文件：ch03\Chap3.8.html）随机改变背景色。

相关的代码实例请参考Chap3.8.html文件，在Chrome浏览器中运行的结果如图3-10所示。每当刷新页面时，页面背景颜色会随机改变，如图3-11所示。

图3-10 页面加载完成时的效果

图3-11 刷新页面后的效果

3.5.2 动态增加立体效果

在CSS中，通过简单的色差来实现简单的立体效果。如下面的案例，分别设置div四边边框的颜色，产生了一个色差，呈现出立体的效果。同时还添加了一个按钮，来动态控制立体效果。当单击按钮时，div呈现立体效果。

【例3-9】（实例文件：ch03\Chap3.9.html）动态增加立体效果。

相关的代码实例请参考Chap3.9.html文件，在IE浏览器中运行的结果如图3-12所示。当单击“动态增加立体效果”时，页面显示效果如图3-13所示。

图3-12 页面加载完成效果

图3-13 单击按钮后效果