原生javascript学习:用循环改变div颜色

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

for (var i; i < array.length; i++) {
    statement;
}

for (var i in array) { 
    statement; 
}


这两种用法看起来能做同样的事情,但实际上两个循环的循环次数一般是不一样的。

例如今天写的这个javascript demo:http://cssplusplus.com/demo/js/1_4_changDivColor0.html

源码如下:

<!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>

完整的demo: http://cssplusplus.com/demo/js/1_4_changDivColor1.html

你可能感兴趣的:(原生javascript学习:用循环改变div颜色)