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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
JS面向对象实现飞机大战
Aug 26 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 404错误页面实现代码
2009/06/22 PHP
php 生成WML页面方法详解
2009/08/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
pygame实现成语填空游戏
2019/10/29 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
服务员岗位职责
2014/01/29 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL