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

最新推荐文章于 2023-12-14 13:56:09 发布

WMN7Q

最新推荐文章于 2023-12-14 13:56:09 发布

阅读量842

点赞数

CC 4.0 BY-SA版权

分类专栏： html&css 文章标签： css html

本文链接：https://blog.youkuaiyun.com/WMN7Q/article/details/57086703

html&css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML实现CSS样式切换的方法。通过修改`<link>`标签的`href`属性来更改页面样式，同时提供了通过下拉菜单选择不同样式的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这一篇文章讲一下切换css样式的一些方法，和最后的代码实现。
css样式切换
上面这个网址有三种方法，我下面讲一下我自己用得方法。

Javascript方法

先在head中添加

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

function chgStyle(v){

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

}

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

</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