原理：
1.每个皮肤对应一个css文件，好维护
2.通过js动态更改<link />标签的href属性
直接上代码：
index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="referrer" content="always" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link id="test" rel="Stylesheet" type="text/css" href="default.css" /> </head> <body> <div class="divColor"></div><br /> <input type="button" value="按钮颜色" class="btnColor" /><br /><br /> <input type="button" value="绿色" onclick="setColor('green')" /> <input type="button" value="红色" onclick="setColor('red')" /> <input type="button" value="默认" onclick="setColor('default')" /> <script> function setColor(color){ document.getElementById("test").setAttribute("href", color + ".css") } </script> </body> </html>
default.css
.divColor{ background-color:#ccc; width:200px; height:200px; } .btnColor{ background-color:#ccc; border-color:#ccc; color:#333; }
red.css
.divColor{ background-color:#f00; width:200px; height:200px; } .btnColor{ background-color:#f00; border-color:#f00; color:#fff; }
green.css
.divColor{ background-color:#0f0; width:200px; height:200px; } .btnColor{ background-color:#0f0; border-color:#0f0; color:#fff; }