JavaScript 网页皮肤更换示例

仅供学习,转载请注明出处

JavaScript 网页皮肤更换示例

需求

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

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

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

文件结构

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

JavaScript 网页皮肤更换示例

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

示例

JavaScript 网页皮肤更换示例

浏览器显示如下:

默认是gold背景色。

JavaScript 网页皮肤更换示例

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

JavaScript 网页皮肤更换示例

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

JavaScript 网页皮肤更换示例

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


JavaScript 网页皮肤更换示例