Home  >  Article  >  Web Front-end  >  js循环改变div颜色具体方法_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 17:31:331884browse

在使用javascript过程中,想循环遍历一个数组,经常使用的语法有两种:

复制代码 代码如下:

 for (var i; i      statement;
 }
 for (var i in array) {
     statement;
 }

这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。
源码如下:
复制代码 代码如下:

 
 
 
 

 <script><BR> window.onload = function() {<BR> var obutton = document.getElementsByTagName("button")[0];<BR> var outer = document.getElementById("outer");<BR> var outerDiv = outer.getElementsByTagName("div");<BR> obutton.onclick = function() {<BR> for(var p in outerDiv) outerDiv[p].style.background = "red";<BR> };<BR> };<br><br> </script>
 
 
 

 
 

 

    

    

    

 

 
 

这段代码用了 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 了。 修改如下:

复制代码 代码如下:

 
 
 
 

 <script><BR> window.onload = function() {<BR> var obutton = document.getElementsByTagName("button")[0];<BR> var outer = document.getElementById("outer");<BR> var outerDiv = outer.getElementsByTagName("div");<BR> obutton.onclick = function() {<BR> for (var i = 0; i < outerDiv.length; i++){<BR> outerDiv[i].style.background = "red";<BR> }<BR> };<BR> };<br><br> </script>
 
 
 

 
 

 

    

    

    

 

 
 
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn