Ferris教程学习笔记:js示例2.3 用循环将三个DIV变成红色
2013-12-11 16:16
746 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>用循环将三个DIV变成红色</title> <style type="text/css"> #outer{width:330px;height:100px;margin:10px auto;} #outer div{float:left;width:100px;height:100px;margin:0 5px;background:black;} </style> </head> <body> <center> <button>点击将div变成红色</button> </center> <div id="outer"> <div></div> <div></div> <div></div> </div> <script type="text/javascript"> window.onload = function(){ var button = document.getElementsByTagName("button")[0]; var divs = document.getElementsByTagName("div"); var size = divs.length; button.onclick = function(){ for(var i=1;i<size;i++){ divs[i].style.backgroundColor = "red"; } }; } </script> </body> </html>
相关文章推荐
- Ferris教程学习笔记:js示例2.10 函数传参,改变Div任意属性的值
- Ferris这个教程学习笔记:js示例1:控制div属性
- Ferris这个教程学习笔记:js示例1.1:控制div属性
- Ferris教程学习笔记:js示例2.7 点击Div,显示其innerHTML
- Ferris教程学习笔记:js示例3.1 用typeof查看数据类型
- Ferris教程学习笔记:js示例2.13 简易JS年历
- Ferris教程学习笔记:js示例3.2 用parseInt解析数字,并求和
- Ferris教程学习笔记:js示例3.3 累加按钮,自加1
- Ferris教程学习笔记:js示例2.11 图片列表:鼠标移入/移出改变图片透明度
- Ferris教程学习笔记:js示例3.4输入两个数字,比较大小
- Ferris教程学习笔记:js示例5.6 跟随鼠标移动(大图展示)
- Ferris教程学习笔记:js示例3.5 页面加载后累加,自加1
- Ferris教程学习笔记:js示例2.5 记住密码提示框
- Ferris教程学习笔记:js示例2.12 简易选项卡
- fgm实例练习笔记-1.4用循环将三个Div变成红色
- Ferris教程学习笔记:js示例3.6 判断数字是否为两位数
- Ferris教程学习笔记:js示例2.4 鼠标移入改变样式,鼠标移出恢复
- Ferris这个教程学习笔记:js示例2.1:网页换肤
- Ferris教程学习笔记:js示例3.8 简易网页时钟
- Ferris教程学习笔记:js示例2.6 百度输入法