js循环改变div颜色具体方法


Posted in Javascript onJune 25, 2013

在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:

 for (var i; i < array.length; i++) {
     statement;
 }
 for (var i in array) {
     statement;
 }

这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。
源码如下:
 <!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>
Javascript 相关文章推荐
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
JavaScript 定时器详情
Nov 11 Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 #Javascript
js操作iframe的一些方法介绍
Jun 25 #Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 #Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 #Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 #Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 #Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 #Javascript
You might like
PHP反射机制用法实例
2014/08/28 PHP
php生成图片缩略图的方法
2015/04/07 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JS模拟自动点击的简单实例
2013/08/08 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
详解python单例模式与metaclass
2016/01/15 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
店长岗位的工作内容
2013/11/12 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
协议书格式
2014/04/23 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
创业计划书之网吧
2019/10/10 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
一文搞懂python异常处理、模块与包
2021/06/26 Python
win10清理dns缓存
2022/04/19 数码科技
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript