0
点赞
收藏
分享

微信扫一扫

JavaScript 网页皮肤更换示例


JavaScript 网页皮肤更换示例_文件结构


需求

有很多时候,网站或者APP需要更换皮肤,那么这种功能是怎么实现的呢?

简单来说,就是给一套皮肤写一个css样式文件,然后通过JavaScript去替换css样式文件,这样就可以达到更换皮肤的效果。

下面来写一个简单的示例:
根据设置两个按钮,点击不同的按钮,则显示不用的网页皮肤样式。

文件结构

首先准备一个html文件,两个css文件。


JavaScript 网页皮肤更换示例_文件结构_02


那么下面就开始来编写示例。

示例


JavaScript 网页皮肤更换示例_css_03


浏览器显示如下:

默认是​​gold​​背景色。


JavaScript 网页皮肤更换示例_css样式_04


点击样式一,则会触发设置样式文件为​​pink.css​​,如下:


JavaScript 网页皮肤更换示例_css样式_05


点击样式二,则会出发设置样式文件为​​gold.css​​,如下:


JavaScript 网页皮肤更换示例_文件结构_06


那么通过这种控制css变化的方式,就可以更换皮肤了。

JavaScript 网页皮肤更换示例_css样式_07


举报

相关推荐

0 条评论