今天来个简单的网页换肤效果 参考来自：http://js.fgm.cc/learn/lesson1/02.html
其实实现原理也很简单，就是改变页面的外链样式表
所以呢，需要准备几个样式表：如下
green.css文件
body{ background:#A3C5A8; } #navlist li{ background:green; }
red.css文件
body{ background:#FDD; } #navlist li{ background:red; }
black.css文件
body{ background:#ccc; } #navlist li{ background:black; }
HTML文件：
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>网页换肤</title> <style> body,div,ul,ul li{margin:0;padding:0;} body{width:100%;height: 100%;} li{list-style:none;} #outer{width:800px;margin:0 auto;padding:20px;text-align: center;} #skinbtn{width:100%;clear:both;height:20px;} #skinbtn li.current{background:#fff !important;} #skinbtn li{width:6px;height:6px;float:left;cursor:pointer;margin-left:5px;font-size:0;} #red{border:3px solid red;background:red;} #green{border:3px solid green;background:green;} #black{border:3px solid black;background:black;} #navlist li{float:left;width:60px;height:30px;margin-left:2px;line-height: 30px;color:#fff;} </style> <link rel="stylesheet" type="text/css" href="green.css" /> <script> window.onload=function(){ var oLink=document.getElementsByTagName('link')[0]; var aSkinBtn=document.getElementById('skinbtn').getElementsByTagName('li'); for(var i=0;i<aSkinBtn.length;i++){ aSkinBtn[i].onclick=function(){ for(var p in aSkinBtn){aSkinBtn[p].className='';} this.className='current'; oLink['href']=this.id+'.css'; } } } </script> </head> <body> <div id="outer"> <ul id="skinbtn"> <li id="red"></li> <li id="green" class="current"></li> <li id="black"></li> </ul> <ul id="navlist"> <li>新闻</li> <li>娱乐</li> <li>体育</li> <li>电影</li> <li>音乐</li> <li>旅游</li> </ul> </div> </body> </html>
代码很简单，但是在这里面我找到了自己的遗漏之处
那就是this.id的用法，我测试了一下兼容性，IE6+均支持，其他当然也支持
它的作用就是获取当前对象的id名称。是不是感觉和className很像。