原生javascript学习：网页换肤
01 <!DOCTYPE html>
02 <html>
03 <head>
04
05 <style>
06 body,ul,li {margin:0;padding:0;}
07 li {list-style-type:none;}
08 a:link, a:visited {text-decoration:none;}
09 a: hover {text-decoration:underline;}
10 #outer {width:500px;margin:0px auto;overflow:hidden;zoom:1;}
11 #skin, #nav {overflow:hidden;zoom:1;}
12 #skin {margin:10px 0;}
13 #skin li {float:left;width:6px;height:6px;cursor:pointer;overflow:hidden;margin-right:10px;text-indent:-9999px;border-width:4px;border-style:solid;}
14 #skin li.current {background:#fff!important;}
15 #red {border-color:red;background:red;}
16 #green {border-color:green;background:green;}
17 #black {border-color:black;background:black;}
18 #nav {border:1px solid #fff;}
19 #nav li {float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;}
20 #nav li.last {width:83px;border-right-width:0px;}
21 #nav li a {color:#fff;display:block;}
22 </style>
23
24 <link href="green.css" rel="stylesheet" type="text/css">
25
26 <script>
27 window.onload = function() {
28 var oLink = document.getElementsByTagName("link")[0];
29 var oSkin = document.getElementById("skin").getElementsByTagName("li");
30
31 for(var i = 0; i < oSkin.length; i++) {
32 oSkin[i].onclick = function() {
33 for (var p in oSkin) oSkin[p].className = "";
34 this.className = "current";
35 oLink['href'] = this.id + ".css";
36 }
37 }
38 };
39 </script>
40
41 </head>
42 <body>
43 <div id="outer">
44 <ul id="skin">
45 <li id="red" title="红色">红</li>
46 <li id="green" class="current" title="绿色">绿</li>
47 <li id="black" title="黑色">黑</li>
48 </ul>
49
50 <ul id="nav">
51 <li><a href="#">新闻</a></li>
52 <li><a href="#">娱乐</a></li>
53 <li><a href="#">体育</a></li>
54 <li><a href="#">电影</a></li>
55 <li><a href="#">音乐</a></li>
56 <li class="last"><a href="#">旅游</a></li>
57 </ul>
58 </div>
59 </body>
60 </html>
作者：黎宇浩
补充：web前端 , JavaScript ,
