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中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
JavaScript 常用函数
2009/12/30 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
js实现下一页页码效果
2017/03/07 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
vue cli webpack中使用sass的方法
2018/02/24 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
让python在hadoop上跑起来
2016/01/27 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python 项目转化为so文件实例
2019/12/23 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
多媒体教室标语
2014/06/26 职场文书
党员个人公开承诺书
2014/08/29 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
工作会议简报
2015/07/20 职场文书