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>
阅读全文
0 0
- fgm实例练习笔记-1.2网页换肤
- fgm实例练习笔记-3.7网页计算器
- fgm实例练习笔记-3.8简易网页时钟
- fgm实例练习笔记-3.9倒计时
- fgm实例练习笔记-4.1 setTimeout应用
- fgm实例练习笔记-1.1控制Div属性
- fgm实例练习笔记-1.3函数接收参数并弹出
- fgm实例练习笔记-1.5js写css hover选择器
- fgm实例练习笔记-1.6记住密码提示框
- fgm实例练习笔记-2.1点击展开下拉列表
- fgm实例练习笔记-2.4弹出层效果
- fgm实例练习笔记-3.4比较数字大小
- fgm实例练习笔记-3.6判断数字是否为两位数
- fgm实例练习笔记-1.4用循环将三个Div变成红色
- fgm实例练习笔记-2.3求出数组中所有数字的和
- fgm实例练习笔记-2.5函数传参,改变Div任意属性的值
- fgm实例练习笔记-2.6图片列表:鼠标移入/移出改变图片透明度
- fgm实例练习笔记-2.11鼠标移过改变图片路径
- 1053. 住房空置率 (20)
- fork()和多线程
- 正则表达式复习--正则语法
- python重载和多态问题
- Python 最小聊天服务器&&客户端
- fgm实例练习笔记-1.2网页换肤
- 生产者/消费者问题的多种Java实现方式
- openstack compute service问题
- QT上的toStdString()在VS2013下出现式子无法计算取0情况
- 如何建立标准的maven web 工程
- spring 发送邮件
- 正则表达式--基础语法总结
- 【新】CentOS7部署Kubernetes集群
- Sublime Text SFTP 注册码