极客观点
项目管理
HarmonyOS
<!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没有设高