记录js学习中的问题－隔行变色

刚开始学习js，昨晚遇到一个问题。

首先，实现隔行变色：通过for循环，依次改变li标签的className；

其次，通过给每个元素添加一个属性名，用来保存鼠标选中之前的className，从而实现鼠标选中和离开时样式的改变。

在鼠标选中或离开的函数中，使用this.className时，效果是正常的。当使用oli.className来赋值时，效果就会变得诡异。

<script type="text/javascript">
		var oLis=document.getElementsByTagName("li");
		var n=oLis.length;
		for(var i=0;i<n;i++){
			var oli=oLis[i];
			switch(i%3){
				case 0:
					oli.className="c1";
					oli.oldClass="c1";
					break;
				case 1:
					oli.className="c2";
					oli.oldClass="c2";
					break;
				default:
					oli.className="c3";
					oli.oldClass="c3";
					break;
			}
			//鼠标移到目标
			oli.onmouseover=function(){
				//oli.className="c4";
				this.className="c4";
			}
			//鼠标离开
			oli.onmouseout=function(){
				var val=oli.oldClass;//1
				//var val=this.oldClass;//2
				this.className=val;
			}
		}
		
	</script>

在鼠标离开的函数中给oli.className赋值时，鼠标选中后再离开的行的样式会变成最后一行的样式。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

今天看到js的另一个例子，对于上述现象的理解如下：

首先，在定义函数时，是将整个函数作为字符串存储在内存中，即“var val=oli.oldClass;this.className=val;"

当鼠标离开某一行时，才会去执行之前定义的函数，var val=oli.oldClass;this.className=val;

此时页面和js代码已经加载完成，这里的oli是oLis[n-1]也就是最后一行，所以才会出现上述现象。