[读码时间] 更换网页背景颜色

说明：代码取自网络，注释为笔者学习所根据自己的理解所添加！
<!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>
View Code