JS实现CSS风格选择器

CSS选择器,用一段JS控制,当你点击链接,JS就会判断你所选择的CSS效果,让相应CSS文件生效,达到风格切换的效果,并且JS会将你的选择保存到COOKIE,保证你在刷新后还能看到自己选择的风格。

/usr/styleswitcher.js

下载后需将文件上传到自己网站根目录里,确保网站所有页面能够调用该JS文件。

然后设置默认风格

设置备选风格

在页面上添加切换风格的按钮

切换到默认风格切换到备选风格

到这里你的风格选择器应该可以使用了,当然备选风格可以设置多个,主要通过title区别。

其实火狐浏览器里如果你用rel="alternate stylesheet"设置过备选风格,就可以通过菜单:查看>页面风格里选择风格,不过这个没有COOKIE,一刷新页面又会变成默认风格,最关键的还是IE不支持这个属性,这个JS很好的解决了这些问题。

好了,快点动手让自己的网站也可以随时变脸吧!

标签: css, javascript, 前端

此文章共有条评论, 人参与