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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
用JS实现选项卡
Mar 23 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集成FCK的函数代码
2008/09/27 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
python实现simhash算法实例
2014/04/25 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Django框架验证码用法实例分析
2019/05/10 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python读写Excel表格的方法
2021/03/02 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
怎样让char类型的东西转换成int类型
2013/12/09 面试题
节水口号标语
2014/06/19 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
公开致歉信
2019/06/24 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript