【Web前端问题】JS网页换肤问题

<!DOCTYPE html>
<html>
<head>

<title>网页换肤</title>
<style type="text/css">
    body,ul,li{list-style: none;padding: 0px;margin:0px;}
    html,body{margin:0;height: 100%}
    a:link,a:visited{text-decoration: none;}
    #outer{width:100%;margin:0 auto;}
    #chooseStyle{width:150px;margin:0 auto;}
    #chooseStyle li{margin:10px;float: left;}
    #red{background: red;width:20px;height: 20px;}
    #green{background: green;width: 20px;height: 20px;}
    #yellow{background: yellow;width: 20px;height: 20px;}
    #nav{width:612px;margin:0 auto;clear: both;border: 1px solid white}
    #nav li{width: 100px;height: 30px;line-height:30px;float: left;border: 1px solid white;text-align: center;}
    #nav li a{font-size: 16px;color: white;cursor: pointer;}
    #nav li a:hover{text-decoration: underline;}
</style>
<link rel="stylesheet" type="text/css" href="red.css">
<script type="text/javascript">
    window.onload=function(){
        var oChoose=document.getElementById("chooseStyle").getElementsByTagName("li");
        var oLink=document.getElementsByTagName("link")[0];
        for (var i=0;i<oChoose.length;i++)
        {
            oChoose[i].onclick=function()
            {
                oLink['href']=this.id+".css";
            }
        }
    }
</script>

</head>
<body>

<div id="outer">
    <ul id="chooseStyle">
        <li id="red"></li>
        <li id="green"></li>
        <li id="yellow"></li>
    </ul>
    <ul id="nav">
        <li><a href="">微信</a></li>
        <li><a href="">QQ</a></li>
        <li><a href="">微博</a></li>
        <li><a href="">支付宝</a></li>
        <li><a href="">美团</a></li>
        <li><a href="">视频</a></li>
    </ul>        
</div>

</body>
</html>

red.css

#red{
background: white;
border:6px solid red;
width:8px;
height: 8px;
}
#nav li{
background-color: red;
}
#outer{
background-color: #FFB6C1;
}

问题一：IE浏览器效果如图：
图片描述

为什么outer的背景颜色不能应用到整个页面？

问题二：网上很多例子源码的onclick函数中有这两句：

 for(var p in oSkin) oSkin[p].className = "";
        this.className = "current";

而且css代码的li设置语句为：

#skin li.current{background:#fff!important;}

我自己的代码不加这些也能实现网页换肤，这么做有什么必要性吗？

回答：

outer没有设高

回答：

#outer{height:100%;}

以上是 【Web前端问题】JS网页换肤问题 的全部内容， 来源链接： utcz.com/a/134400.html

回到顶部