ie6的offsetHeight的奇怪现象

xingqiliudehuanghun 2009-07-15 09:34:27

昨天给同学调试程序发现了这个问题，大家分析下
这样写offsetHeight=0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<table><tr><td>

<div id="scrollWrap" style="overflow: hidden; position: relative; width: 170px; height: 110px;">

    <div id="scrollMsg">

        <ul>

            <li><a href="http://chart.cn.yahoo.com/t?s=CEO" target="b">CNOOC Ltd. (CEO.NY)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=0883.HK" target="b">CNOOC Ltd. (0883.HK)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=2883.HK" target="b">COSL (2883.HK)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=601808.SS" target="b">COSL (601808.SS)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=600583.SS" target="b">COOEC (600853.SS)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=3983.HK" target="b">China BlueChem (3983.HK)</a><br />

            </li>

        </ul>

    </div>

</div>

<script type="text/javascript">																								

<!--

try{ 

	 var isStoped = false; 

	 var oScroll = document.getElementById("scrollWrap"); 

	 with(oScroll){ 

		 noWrap = true; 

	 } 

 

	 oScroll.onmouseover = new Function('isStoped = true'); 

	 oScroll.onmouseout = new Function('isStoped = false'); 

 

	 var preTop = -1; 

	 var curTop = 0; 

	 var stopTime = 0; 

	 var oScrollMsg = document.getElementById("scrollMsg");

 

	 //oScroll.appendChild(oScrollMsg.cloneNode(true)); 

	 init_srolltext(); 

	 

}catch(e) {} 

 

 

function init_srolltext(){ 

	 oScroll.scrollTop = 0; 

	 setInterval('scrollUp()',15); 

} 





/**----------------------------------------------------////

计算每次需要向上卷动的高度,原来的代码在ie下出错

就是此处计算失败造成的,其余代码不需要修改.

*/



var scrollHeight =(document.getElementById('scrollMsg')

							.getElementsByTagName("ul")[0]

							.getElementsByTagName("li")[0]

							.offsetHeight);

alert(scrollHeight);													

function scrollUp(){ 

	if(isStoped){

		return; 

	}

		

	curTop += 1; 

	 

	if(curTop == scrollHeight) { 

		 stopTime += 1; 

		 curTop -= 1; 

		 if(stopTime == 150) { 

			 preTop = -1;  

			 curTop = 0;  

			 stopTime = 0; 

		 } 

		 

	 }else{ // alert(oScroll.scrollTop)

		 if(preTop == oScroll.scrollTop){ 

			 oScroll.scrollTop = 0;

			 preTop = -1;  

			 curTop = scrollHeight-1;

			 stopTime = 0; 

			// oScroll.scrollTop += 1; 

		 } 

		 

		 preTop = oScroll.scrollTop;

		 oScroll.scrollTop += 1; 

	 } 

} 

//-->

</script>      

</td></tr></table>

</body>

</html>

这样写可以得到offsetHeight

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<table><tr><td>

<div id="scrollWrap" style="overflow: hidden; position: relative; width: 170px; height: 110px;">

    <div id="scrollMsg">

        <ul>

            <li><a href="http://chart.cn.yahoo.com/t?s=CEO" target="b">CNOOC Ltd. (CEO.NY)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=0883.HK" target="b">CNOOC Ltd. (0883.HK)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=2883.HK" target="b">COSL (2883.HK)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=601808.SS" target="b">COSL (601808.SS)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=600583.SS" target="b">COOEC (600853.SS)</a><br />

            </li>

            <li><a href="http://chart.cn.yahoo.com/t?s=3983.HK" target="b">China BlueChem (3983.HK)</a><br />

            </li>

        </ul>

    </div>

</div>      

</td></tr></table>

<script type="text/javascript">																								

<!--

try{ 

	 var isStoped = false; 

	 var oScroll = document.getElementById("scrollWrap"); 

	 with(oScroll){ 

		 noWrap = true; 

	 } 

 

	 oScroll.onmouseover = new Function('isStoped = true'); 

	 oScroll.onmouseout = new Function('isStoped = false'); 

 

	 var preTop = -1; 

	 var curTop = 0; 

	 var stopTime = 0; 

	 var oScrollMsg = document.getElementById("scrollMsg");

 

	 //oScroll.appendChild(oScrollMsg.cloneNode(true)); 

	 init_srolltext(); 

	 

}catch(e) {} 

 

 

function init_srolltext(){ 

	 oScroll.scrollTop = 0; 

	 setInterval('scrollUp()',15); 

} 





/**----------------------------------------------------////

计算每次需要向上卷动的高度,原来的代码在ie下出错

就是此处计算失败造成的,其余代码不需要修改.

*/



var scrollHeight =(document.getElementById('scrollMsg')

							.getElementsByTagName("ul")[0]

							.getElementsByTagName("li")[0]

							.offsetHeight);

alert(scrollHeight);													

function scrollUp(){ 

	if(isStoped){

		return; 

	}

		

	curTop += 1; 

	 

	if(curTop == scrollHeight) { 

		 stopTime += 1; 

		 curTop -= 1; 

		 if(stopTime == 150) { 

			 preTop = -1;  

			 curTop = 0;  

			 stopTime = 0; 

		 } 

		 

	 }else{ // alert(oScroll.scrollTop)

		 if(preTop == oScroll.scrollTop){ 

			 oScroll.scrollTop = 0;

			 preTop = -1;  

			 curTop = scrollHeight-1;

			 stopTime = 0; 

			// oScroll.scrollTop += 1; 

		 } 

		 

		 preTop = oScroll.scrollTop;

		 oScroll.scrollTop += 1; 

	 } 

} 

//-->

</script>

</body>

</html>