原生javascript学习:用循环改变div颜色
2012-06-17 20:02
369 查看
在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:
这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。
例如今天写的这个javascript demo:http://cssplusplus.com/demo/js/1_4_changDivColor0.html
源码如下:
这段代码用了 for - in 语句做循环,看上去没有问题。
可是在浏览器调试的时候,会报错:
"Uncaught TypeError: Cannot set property 'background' of undefined"
为什么会这样呢?
如果我们把 stament 的内容改一下,就会发现问题了:
结果输出是:0 1 2 length item
所以,当 property 取到 length 和 item 时,再试图用调用 style 方法,当然就 undefined 了。 修改如下:
完整的demo:
http://cssplusplus.com/demo/js/1_4_changDivColor1.html
for (var i; i < array.length; i++) { statement; }
for (var i in array) { statement; }
这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。
例如今天写的这个javascript demo:http://cssplusplus.com/demo/js/1_4_changDivColor0.html
源码如下:
<!DOCTYPE html> <html> <head> <style> #button{text-align:center;} #outer{width:330px; height:100px; margin:10px auto;} #outer div{float:left;width:100px;height:100px;margin:0px 5px;background:black;} </style> <script> window.onload = function() { var obutton = document.getElementsByTagName("button")[0]; var outer = document.getElementById("outer"); var outerDiv = outer.getElementsByTagName("div"); obutton.onclick = function() { for(var p in outerDiv) outerDiv[p].style.background = "red"; }; }; </script> </head> <body> <div id="button"> <button>点击变红色</button> </div> <div id="outer"> <div></div> <div></div> <div></div> </div> </body> </html>
这段代码用了 for - in 语句做循环,看上去没有问题。
可是在浏览器调试的时候,会报错:
"Uncaught TypeError: Cannot set property 'background' of undefined"
为什么会这样呢?
如果我们把 stament 的内容改一下,就会发现问题了:
for(var p in outerDiv) alert(p);
结果输出是:0 1 2 length item
所以,当 property 取到 length 和 item 时,再试图用调用 style 方法,当然就 undefined 了。 修改如下:
<!DOCTYPE html> <html> <head> <style> #button{text-align:center;} #outer{width:330px; height:100px; margin:10px auto;} #outer div{float:left;width:100px;height:100px;margin:0px 5px;background:black;} </style> <script> window.onload = function() { var obutton = document.getElementsByTagName("button")[0]; var outer = document.getElementById("outer"); var outerDiv = outer.getElementsByTagName("div"); obutton.onclick = function() { for (var i = 0; i < outerDiv.length; i++){ outerDiv[i].style.background = "red"; } }; }; </script> </head> <body> <div id="button"> <button>点击变红色</button> </div> <div id="outer"> <div></div> <div></div> <div></div> </div> </body> </html>
完整的demo:
http://cssplusplus.com/demo/js/1_4_changDivColor1.html
相关文章推荐
- 作品第一课----循环改变DIV颜色
- demo4,循环改变div颜色,总结
- js循环改变div颜色具体方法
- 【学习笔记01】:hover为DIV添加鼠标悬停时改变颜色的效果
- javascript 切换按钮改变div颜色
- Javascript中单击按键来循环改变字体的颜色
- javascript学习-原生javascript的小特效(改变透明度效果)
- JavaScript实现同一页面不同div的切换及颜色改变
- 原生javascript学习:鼠标移入移出改变样式
- JavaScript改变div的背景颜色
- JavaScript怎么改变div的背景颜色
- js循环改变div颜色具体方法
- Asp.Net Ajax 学习笔记9 JavaScript的原生类型以及Microsoft AJAX Library的相关扩展(上)
- javascript学习-原生javascript的小特效(多物体运动效果)
- 利用JavaScript脚本改变访问过链接的颜色
- 用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
- javascript学习实录 之六(div开关闭合效果实例) --刘小小尘
- javascript select 改变字的颜色
- javascript select 改变字的颜色
- 在Web DataGrid中当鼠标移到某行与离开时行的颜色发生改变(结合javascript)