换肤 · 人手一本php工具书

>[info]之前考虑用cookie做。后一想用户如果给cookie禁止咯怎么办呢？想了想还是用h5的localStorage做吧！！效果图： ![](https://box.kancloud.cn/e1e3f1211d4ced12ab48fcbc8f78a9be_1439x598.png) html代码： ``` html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq</title> <link id="bg" rel="stylesheet" type="text/css" href="skin_css/skin_red.css"/> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="index.js"></script> </head> <body> <input type="button" name="" id="red" value="红色" /> <input type="button" name="" id="blue" value="蓝色" /> <input type="button" name="" id="green" value="绿色" /> </body> </html> ``` jq代码： ``` jq $(function(){ var oBg = $("#bg"); //css链接的id var skin = 'skin'; //localStorage的key svalue = localStorage.getItem(skin); //如果有localStorage中有数据就用localStorage中的数据 if(svalue){ oBg.attr('href',"skin_css/skin_"+svalue+".css"); } $("#red").click(function(){ skin_value = $(this).attr("id"); //red localStorage.setItem(skin,skin_value); //存到数据库 oBg.attr('href',"skin_css/skin_"+skin_value+".css"); }); $("#blue").click(function(){ skin_value = $(this).attr("id"); //blue localStorage.setItem(skin,skin_value); //存到数据库 oBg.attr('href',"skin_css/skin_"+skin_value+".css"); }); $("#green").click(function(){ skin_value = $(this).attr("id"); //green localStorage.setItem(skin,skin_value); //存到数据库 oBg.attr('href',"skin_css/skin_"+skin_value+".css"); }); }); ``` css代码：自己复制3份，放在3个不同的文件中 ``` css *{ padding:0; margin: 0; } body{ background-color: green; } ``` https://github.com/yxgg/skin #下载源码