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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
js弹出对话框方式小结
Nov 17 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
Vue组件生命周期运行原理解析
Nov 25 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
php GeoIP的使用教程
2011/03/09 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python从入门到精通(DAY 2)
2015/12/20 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
法院信息化建设方案
2014/05/21 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
护林员个人总结
2015/03/04 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
钱学森电影观后感
2015/06/04 职场文书
2019年教师入党申请书
2019/06/27 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
导游词之西安骊山
2019/12/20 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
Python - 10行代码集2000张美女图
2021/05/23 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis