換膚 · 人手一本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 #下載源碼