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

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

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

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

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

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

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

如：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;input type="button" value="变大" οnclick="big()" /&gt; &lt;input type="button" value="缩小" οnclick="small()" /&gt; &lt;div id="mydiv" style="width: 400px;height: 400px"&gt;&lt;/div&gt; </td> 
 </tr> 
 </tbody> 
</table>

使用第一种方式：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function big(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mydiv=document.getElementById("mydiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mydiv.style.width="800px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mydiv.style.height="800px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } </td> 
 </tr> 
 </tbody> 
</table>

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

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;style type="text/css"&gt; .small { &nbsp;&nbsp;&nbsp;&nbsp;width: 200px; &nbsp;&nbsp;&nbsp;&nbsp;height: 200px; &nbsp;&nbsp;&nbsp;&nbsp;background-color: green; } &lt;/style&gt; </td> 
 </tr> 
 </tbody> 
</table>

然后使用第二种方式：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &nbsp;function small(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var mydiv=document.getElementById("mydiv"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//修改类选择 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mydiv.className="small"; } </td> 
 </tr> 
 </tbody> 
</table>

下面做两个例子：

### 1、轮询框示例 ###

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

**display:none;//隐藏**

**display:block;//显示**。

实现代码，html排版如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;span οnmοuseοver="showdiv('div1')"&gt;标题1&lt;/span&gt; | &lt;span οnmοuseοver="showdiv('div2')"&gt;标题2&lt;/span&gt; | &lt;span οnmοuseοver="showdiv('div3')"&gt;标题3&lt;/span&gt; &lt;div id="div1" class="normal"&gt;我是第一个&lt;/div&gt; &lt;div id="div2" class="normal hidediv"&gt;我是第二个&lt;/div&gt; &lt;div id="div3" class="normal hidediv"&gt;我是第三个&lt;/div&gt; </td> 
 </tr> 
 </tbody> 
</table>

对应的css样式如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;style type="text/css"&gt; .normal { &nbsp;&nbsp;&nbsp;&nbsp;width: 400px; &nbsp;&nbsp;&nbsp;&nbsp;height: 400px; &nbsp;&nbsp;&nbsp;&nbsp;background-color: red; } .hidediv { &nbsp;&nbsp;&nbsp;&nbsp;display: none; } &nbsp;&nbsp;&nbsp; &lt;/style&gt; </td> 
 </tr> 
 </tbody> 
</table>

js控制如下：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> function showdiv(sdiv){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div1=document.getElementById("div1"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div2=document.getElementById("div2"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var div3=document.getElementById("div3"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//先把全部隐藏 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div1.style.display="none"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div2.style.display="none"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div3.style.display="none";&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//再把当前显示 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(sdiv).style.display="block"; &nbsp;} </td> 
 </tr> 
 </tbody> 
</table>

效果如下：

![70][]

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

[70]: /images/20220517/4c95138ea0fb4d6e9201db2b3e64c65c.png