脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js循环改变div颜色

js循环改变div颜色具体方法

 更新时间：2013年06月25日 11:40:28   作者：  
本篇文章主要介绍了js循环改变div颜色具体方法，需要的朋友可以参考一下

在使用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>

您可能感兴趣的文章:

相关文章

  • JS实现按比例缩小图片宽高

    JS实现按比例缩小图片宽高

    这篇文章主要为大家详细介绍了JS实现按比例缩小图片宽高，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • gulp教程_从入门到项目中快速上手使用方法

    gulp教程_从入门到项目中快速上手使用方法

    下面小编就为大家带来一篇gulp教程_从入门到项目中快速上手使用方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS+HTML5 FileReader对象用法示例

    JS+HTML5 FileReader对象用法示例

    这篇文章主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下
    2017-04-04
  • js实现window.open不被拦截的解决方法汇总

    js实现window.open不被拦截的解决方法汇总

    这篇文章主要介绍了js实现window.open不被拦截的解决方法,实例汇总了常用的不被拦截的解决方法,需要的朋友可以参考下
    2014-10-10
  • JS getStyle获取最终样式函数代码

    JS getStyle获取最终样式函数代码

    定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性
    2010-04-04
  • JS 获取select(多选下拉)中所选值的示例代码

    JS 获取select(多选下拉)中所选值的示例代码

    通过js获取select(多选下拉)中所选值，具体实现如下，有需要的朋友可以参考下，希望对大家有所帮助
    2013-08-08
  • javascript 异常处理使用总结

    javascript 异常处理使用总结

    javascript 异常处理使用总结try…catch…finally window.onerror
    2009-06-06
  • 前端使用pdf.js实现pdf转为图片

    前端使用pdf.js实现pdf转为图片

    这篇文章主要为大家详细介绍了前端如何使用pdf.js实现pdf转为图片功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • JavaScript+canvas实现五子棋游戏

    JavaScript+canvas实现五子棋游戏

    这篇文章主要为大家详细介绍了JavaScript+canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 微信小程序select下拉框实现效果

    微信小程序select下拉框实现效果

    这篇文章主要介绍了微信小程序select下拉框实现效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论