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

一时失言乱红尘 2022-05-17 03:07 864阅读 0赞

之前使用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”;

 }

效果如下：

70

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

发表评论

表情：
评论列表 （有 0 条评论，864人围观）

还没有评论，来说两句吧...

相关阅读