java怎样实现换肤功能_JavaScript实现换肤功能

一，js换肤的基本原理

基本原理很简单，就是使用 JS 切换对应的 CSS 样式表文件。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。 那么基本工作流程就出来了：访问网页——JS 读取 Cookie ——如果没有，使用默认皮肤——如果有，使用指定皮肤；用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

二，事先需要的准备工作

1，不同的皮肤对应不同的css文件，准备好多套css样式文件：

如蓝色对应：skinColour_blue.css

黄色对应：skinColour_yellow.css

2，图片存放在不同的皮肤文件夹下：

例如，蓝色对应：blue文件夹；黄色对应：yellow文件夹。

将不同皮肤颜色的图片放在相对应的文件夹里，图片切换原理：在换肤函数里设置img标签的src路径属性来切换图片。

三，换肤实现的过程

1，在网页开头引入css文件

2，在页面上定义2个皮肤切换按钮