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

来源:互联网 发布:lego ev3 编程 编辑:程序博客网 时间:2024/06/01 16:21

三个按钮和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>
原创粉丝点击