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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
js中生成map对象的方法
Jan 09 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 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
其他功能
2006/10/09 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Angular4 反向代理Details实践
2018/05/30 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python基于opencv检测程序运行效率
2019/12/28 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
家长意见和建议怎么写
2015/06/04 职场文书
高中班主任心得体会
2016/01/07 职场文书
《海上日出》教学反思
2016/02/23 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL