关于切换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