编程目的是点击不同颜色按钮，网页背景颜色也发生相应变化
<!DOCTYPE html>
<html>
<head>
<title>网页换肤</title>
<style type="text/css">
*{ margin: 0px; padding: 0px; }
body{ width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.514); }
#linklist{ width: 69px; height: 15px; margin: 30px 350px 10px 330px; }
#linklist div{ width: 11px; height: 11px; border: 2px solid #333333; border-radius: 100%; margin-left: 4px; margin-right: 4px; float: left; cursor: pointer;}
#app2{ width: 540px; height: 32px; list-style-type: none; margin: 0px auto;}
#app2 li{ width: 90px; height: 32px; background-color: rgba(255, 0, 0, 0.514); float: left; }
#app2 a{ width: 86px; height: 28px; display: inline-block; border: 2px solid #ffffff;
color: #ffffff; text-decoration: none; line-height: 28px; text-align: center; }
</style>
</head>
<body>
<div id="linklist">
<div style="background-color: rgba(255, 0, 0, 0.514);"></div>
<div style="background-color: rgba(0, 132, 255, 0.514);"></div>
<div style="background-color: rgba(72, 255, 0, 0.514);"></div>
</div>
<ul id="app2">
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">旅游</a></li>
</ul>
<script type="text/javascript">
window.onload = function(){
// 获取元素
var licolor = document.getElementById("app2").getElementsByTagName("li");
var linkpoint = document.getElementById("linklist").getElementsByTagName("div");
// 遍历点击事件
for(var i = 0; i < linkpoint.length; i++){
linkpoint[i].onclick = function(){
// 进行颜色改变的操作
var strcolor = this.style.backgroundColor;
document.body.style.backgroundColor = strcolor;
for(var j = 0; j < licolor.length; j++){
licolor[j].style.backgroundColor = strcolor;
}
}
}
}
</script>
</body>
</html>
效果图：
