Javascript（六）javascript动态修改html的CSS样式

之前使用js修改html的属性达到一种交互的效果，事实上，使用js修改html的css样式可以实现一种更加绚丽的交互效果。

要修改html的样式有两种方式，一种是修改style属性

html标签对象.style.style属性="属性值"。

另外一种就是可以定义一个新的样式类，然后修改html的类属性。

html标签对象.className="css类"。

如：

<input type="button" value="变大" οnclick="big()" /> <input type="button" value="缩小" οnclick="small()" /> <div id="mydiv" style="width: 400px;height: 400px"></div>

使用第一种方式：

function big(){           var mydiv=document.getElementById("mydiv");           mydiv.style.width="800px";           mydiv.style.height="800px";       }

当然也可以先定义一个css类定义：

<style type="text/css"> .small {     width: 200px;     height: 200px;     background-color: green; } </style>

然后使用第二种方式：   

function small(){           var mydiv=document.getElementById("mydiv");           //修改类选择           mydiv.className="small"; }

下面做两个例子：

1、轮询框示例

虽然这个样式不好看，不过也可以看出平时经常见到的轮询框其实就是通过修改style样式的display属性。

display:none;//隐藏

display:block;//显示。

实现代码，html排版如下：

<span οnmοuseοver="showdiv('div1')">标题1</span> | <span οnmοuseοver="showdiv('div2')">标题2</span> | <span οnmοuseοver="showdiv('div3')">标题3</span> <div id="div1" class="normal">我是第一个</div> <div id="div2" class="normal hidediv">我是第二个</div> <div id="div3" class="normal hidediv">我是第三个</div>

对应的css样式如下：

<style type="text/css"> .normal {     width: 400px;     height: 400px;     background-color: red; } .hidediv {     display: none; }     </style>

js控制如下：    

function showdiv(sdiv){             var div1=document.getElementById("div1");            var div2=document.getElementById("div2");            var div3=document.getElementById("div3");           //先把全部隐藏           div1.style.display="none";           div2.style.display="none";           div3.style.display="none";            //再把当前显示          document.getElementById(sdiv).style.display="block";  }

效果如下：

当鼠标进入时第二行字体改变