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实现Windows任务管理器的代码
Mar 27 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
webpack 模块热替换原理
Apr 09 Javascript
JS中min函数实例讲解
Feb 18 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
vue实现标签云效果的示例
Nov 09 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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通用检测函数集合
2006/11/25 PHP
什么是MVC,好东西啊
2007/05/03 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php不用正则验证真假身份证
2013/11/06 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python装饰器基础详解
2016/03/09 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Django REST framework视图的用法
2019/01/16 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
聊聊python中的循环遍历
2020/09/07 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
公开承诺书格式
2014/05/21 职场文书
python实现简易名片管理系统
2021/04/11 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js