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浮点数运算出现Bug的方法
Mar 12 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
js实现五星评价功能
2017/03/08 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
Python加速程序运行的方法
2020/07/29 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
信息学院毕业生自荐信范文
2014/03/04 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
开业庆典致辞
2015/08/01 职场文书
redis缓存存储Session原理机制
2021/11/20 Redis
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python