关于切换css样式的一些方法

关于切换css样式的一些方法


  这一篇文章讲一下切换css样式的一些方法，和最后的代码实现。

 
css样式切换

  上面这个网址有三种方法，我下面讲一下我自己用得方法。

 

      Javascript方法

      先在head中添加

      <link type="text/css" id="pagestyle" rel="stylesheet" href="style/blue.css" />

      再添加js函数，来改变样式表的地址，其中v为样式表的名称。

      function chgStyle(v){

                   document.getElementsByTagName("link")["pagestyle"].href = "style/" + v + ".css";

      }

     假如通过Html的select来控制样式表的变化，则可以这样用：

     <select onchange="chgStyle(this.value)">

          <option value="blue" selected>蓝色风格</option>

          <option value="green">绿色风格</option>

    </select>

当然，我们还想要把这个select放在右上角，于是我们再加一个样式

style="position:absolute;right:1px;top:1px;z-index:999;"
最后实现的效果如下：



在屏幕的右上角会有切换风格的选项，可以通过选择来切换风格。

最后附上一段我自己用得代码

<!--切换风格-->
<script type="text/javascript">
function chgStyle(v){
document.getElementsByTagName("link")["pagestyle"].href = "css/twoColFixLtHdr"+v+".css";
document.getElementsByTagName("link")["barstyle"].href = "css/SpryAssets/SpryMenuBarVertical"+v+".css";
document.getElementsByTagName("img")["Insert_logo"].src = "image/logo/twoColFixLtHdr"+v+".png";
}
</script>
<div style="position:absolute;right:1px;top:1px;z-index:999;">
<select onchange="chgStyle(this.value)">
<option value="" selected>蓝色风格</option>
<option value="_night">绿色风格</option>
</select>
</div>
下面还是讲一下我自己做的一个小作品。

下面链接是自己做的一个小作品，是用来学习汉字结构的，我们将汉字的结构具体展现出来了，摆脱了以往汉字教学中的模糊概念，希望大家可以看看多提提意见。
汉字结构学习

以上，所有

2017/2/25