说明：代码取自网络，注释为笔者学习所根据自己的理解所添加！
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>更换网页背景颜色</title> <style> body,ul,li{ /*将body,ul,li的外边距和内边距全设置为0*/ margin:0; padding:0; } html,body{ /*文档高度*/ height:100%; } body{ /*字体和行高、字体*/ font:12px/1.5 Tahoma; } li{ list-style-type:none; /*清除样式*/ } a:link,a:visited{ text-decoration:none; /*链接、已访问样式为none*/ } a:hover{ text-decoration:underline; /*鼠标悬浮样式为下划线*/ } #outer{ /*设置外部div窗口宽度，左右置中*/ width:500px; margin:0 auto; overflow:hidden; zoom:1; } #skin, #nav{ overflow:hidden; zoom:1; } #skin{ margin:10px 0; } #skin li{ float:left; /*div中的第一个无序列表中的li元素左浮动以便水平排列*/ width:6px; height:6px; cursor:pointer; overflow:hidden; margin-right:10px; text-indent:-9999px; border-width:4px; border-style:solid; } #skin li.current{ /*当前选中样式背景*/ background:#fff !important; } #red{ border-color:red; background:red; } #green{ border-color:green; background:green; } #black{ border-color:black; background:black; } #nav{ border:1px solid #fff; } #nav li{ /*div窗口中的第2个ul无序列表，左浮动以便水平排列*/ float:left; width:82px; line-height:25px; text-align:center; border-right:1px solid #fff; } #nav li.last{ width:83px; border-right-width:0; /*最后一个li元素，去年其右边框*/ } #nav li a{ color:#fff; } </style> <!--外部样式表，放置在最后以覆盖内部样式表--> <link href="green.css" rel="stylesheet" type="text/css" /> <script> window.onload = function () { var oLink = document.getElementsByTagName("link")[0]; //获取link元素集合中的第一个 var oSkin = document.getElementById("skin").getElementsByTagName("li"); //链式操作，获取id为skin的ul中的所有li元素 for (var i = 0; i < oSkin.length; i++) { //for循环遍历所有的li元素 oSkin[i].onclick = function () { //给每个li元素添加click事件处理程序 for (var p in oSkin) oSkin[p].className = ""; //遍历所有li元素，设置类为空 this.className = "current"; //给当前点击元素添加类名 oLink['href'] = this.id + ".css"; //获取当前li元素的id名，拼合为文件名并赋值给link元素的属性href } } }; </script> </head> <body> <div id="outer"> <ul id="skin"> <li id="red" title="红色">红</li> <li id="green" class="current" title="绿色">绿</li> <li id="black" title="黑色">黑</li> </ul> <ul id="nav"> <li><a href="javascript:;">新闻</a></li> <li><a href="javascript:;">娱乐</a></li> <li><a href="javascript:;">体育</a></li> <li><a href="javascript:;">电影</a></li> <li><a href="javascript:;">音乐</a></li> <li class="last"><a href="javascript:;">旅游</a></li> </ul> </div> </body> </html>