6.6　　在脚本中修改显示样式

　　　　很多时候我们需要在脚本中动态控制页面的显示效果，使用脚本动态设置CSS样式也非常简单。

　　　　按如下步骤就可以动态修改目标元素的CSS样式。

　　　　　　1：获取到需要设置CSS样式的目标元素，例如可以使用getElementById()方法。

　　　　　　2：修改目标元素的CSS样式。常用的方法有两种。

　　　　　　　　修改内联CSS属性值：使用如"obj.style.属性名=属性值"的JavaScript代码即可。

　　　　　　　　修改HTML元素的class属性值：如使用"obj.className=class 选择器"的JavaScript脚本即可。

6.6.1　　随机改变页面的背景色

　　　　　　改变页面的背景色是非常简单的事情，只要生成一个随机的6位数，并将该值赋给body元素的backgroundColor CSS属性

　　　　　　即可。下面是代码示范：

　　　　　　　　<Script>

　　　　　　　　function changebg()

　　　　　　　　{

　　　　　　　　　　//定义一个存储背景色的值的空字符串

　　　　　　　　　　var bgColor="";

　　　　　　　　　　//循环6次，生成一个随机的6位数

　　　　　　　　　　for(var i = 0;i<6;i++)

　　　　　　　　　　{

　　　　　　　　　　　　bgColor+=""+Math.round(Math.random()*9);

　　　　　　　　　　}

　　　　　　　　　　//将随机生成的背景颜色值赋给页面的背景色

　　　　　　　　　　document.body.style.backgroundColor="#"+bgColor;

　　　　　　　　}

　　　　　　　　//为页面单击事件绑定事件处理函数

　　　　　　　　document.onclick=changeBg;

　　　　　　　　</Script>

6.6.2　　动态增加立体效果

　　　　　　立体效果是一种很简单的CSS效果，其原理是通过为其增加4个边框来实现，

　　　　　　其中左上边框的颜色稍浅，而下、右边框的颜色稍深。

　　　　　　代码示范：

　　　　　　　　//定义立体效果的CSS样式

　　　　　　　　.solid{

　　　　　　　　　　width:160px;

　　　　　　　　　　text-align:center;

　　　　　　　　　　border-right:#222 3px solid;

　　　　　　　　　　border-top:#ddd 3px solid;

　　　　　　　　　　border-left:#ddd 3px solid;

　　　　　　　　　　border-bottom:#222 3px solid;

　　　　　　　　　　background-color:#ccc;

　　　　　　　　}

　　　　　　　　//动态切换CSS样式实现效果的脚本   为需要实现效果的元素绑定该脚本即可

　　　　　　　　function chg()

　　　　　　　　{

　　　　　　　　　　document.getElementById("up").className="solid";

　　　　　　　　}