Js控制CSS切换样式表实现页面风格切换

看到别人网站都有一个无刷新切换风格的功能,自己很喜欢,但始终没找到方法,后来看了网上的教程,总算自己做出来了,下面只说关键步骤,相信通过这篇教程,你会搞定这个功能。

首先,我们需要自己写好几种CSS风格文件,这就是接下来要切换的CSS文件。比如“红色记忆”这款网页风格你可以保存为1.css,“绿草青青”你可以保存为2.css,蔚蓝天空可保存为3.css。各个CSS里面的代码那就靠你发挥自己的想像力了,这是你的事,我可不愿管这些。

各个CSS代码文件写成后,请按下面的方式引入到网页中:

1

2

3

下面我们就需要用JS来控制上面几个CSS文件的切换,也就是无刷新切换CSS样式表,JavaScript代码如下:


Js写好了,下面还需要一步,那就是让用户通过点击相应的切换风格链接去调用Js函数,从而让JS去控制样式的切换,你可以把下面的代码放在你网页的右上角,让用户点击方便:

1
切换网页风格:
2
红色记忆
3
绿草青青
4
蔚蓝天空

好了,一个无刷新切换风格的基本实现思路和代码就是这样了,剩下的就是你去不断完善了。

你可能感兴趣的:(Js控制CSS切换样式表实现页面风格切换)