网页换肤代码

关于localStorage用法可以参阅localStorage一章节。 下面分享一段简单的代码实例，它实现了利用localStorage进行换肤的效果。 代码如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!DOCTYPE html> < html > < head > < meta  charset = " utf-8" > < title > 网页换肤代码 </ title > < style > *{    margin: 0;    padding: 0; } body{    background-color: #000; } ul{    width: 500px;    margin: 100px auto; } li{    list-style: none;    float: left;    width: 50px;    height: 50px;    border: 5px solid #fff;    border-radius: 50%;    margin: 0 10px; } </ style > </ head > < body > < ul >    < li ></ li >    < li ></ li >    < li ></ li >    < li ></ li >    < li ></ li > </ ul > </ body > < script > var colors=['red','green','orange','lightblue','blue']; var lis=document.querySelectorAll('li'); for(var i=0;i< lis.length ;i++){    lis[i] .style.background = colors [i];    lis[i] .index =i;    lis[i] .onclick = function (){      document.body.style.background = colors [this.index];      /*将当前的颜色存储起来*/      localStorage.setItem('bgc',colors[this.index]);    }    /*当页面打开时，颜色是之前关闭前设置的颜色*/    window.onload = function (){      document.body.style.background = localStorage .getItem('bgc');    } } </script> </ html >