fgm实例练习笔记-1.2网页换肤

三个按钮和nav均用ul实现，float：left调整为横向。效果是nav和body的background-color改变。调用了不同的外部css文件实现。

<link href="green.css" rel="stylesheet" type="text/css">

link的href将被script修改。

先写style初始化。

script部分：

<script type="text/javascript">
window.onload= function()
{
var oLink = document.getElementsByTagName("link")[0];  //oLink获取了link的NodeList的第一项（页面内第一个link）
var oSkin = document.getElementById("skin").getElementsByTagName("li"); //oSkin获取了按钮列表skin中的所有按钮li组成的NodeList的数组。

for(var i = 0;i < oSkin.length;i++) //用for循环遍历每一个按钮
{
oSkin[i].onclick = function() //onclick事件绑在按钮数组oSkin（的每一项）上
{
for(var p in oSkin) oSkin[p].className = ""; //for in迭代oSkin对象的每一项，修改每一项的className都变成空
this.className = "current"; //紧接着把当前的那个按钮li的className改成"current"，没有实际效果，但onclick后代码内可以清晰呈现出当前click的是哪一个li，是哪一种颜色。 （这两行也可以不要）

oLink['href'] = this.id + ".css";} //方括号以属性名href调用link的href属性，修改成当前按钮调用的的id.css，改变了调用的外部css文件，进而改变了style。
}
};//onload阶段完成了每一个按钮的onclick设定
</script>