本文介绍了元素offsetHeight始终为“ 0”。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
为什么我得到的元素offsetHeight为 0？甚至没有显示元素的原始高度
Why I am getting Element offsetHeight "0"? even element original height is not showing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="www.w3/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> /* Added for Menu */ .navbar { list-style: none;`enter code here` padding: 0 10px; margin: 0; float: left; width: 980px; background: url(images/navbar.gif) repeat-x; } .navbar ul { list-style: none; padding: 0px; margin: 0; float: left; width: 260px; } .navbar ul li { float:left; position:relative; z-index:1000; margin:0px; padding:0px; } .navbar ul li ul { display:none; border:none; width: 260px; padding:0 0px 0px 0px; } .navbar ul li a { font-size: 12px; float:left; display:block; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; color:#FFF; } .navbar ul li:hover { width:auto; } .navbar ul li:hover a { background:url(images/navbar_subnav.png) repeat-x scroll 0 0 transparent; text-decoration:none; } .navbar ul li:hover ul { display:block; position:absolute; z-index:998; top:0px; margin-top:25px; left:0; } .navbar ul li:hover ul li ul { background-position: center bottombottom; cursor: pointer; } .navbar ul li:hover ul li a { display:block; line-height:1.3em; padding:4px 16px 4px 16px; border-bottom:1px solid #205284; border-left:1px solid #205284; border-right:1px solid #205284; border-top:1px solid #205284; z-index: 10000; width:200px; } .navbar ul li:hover ul li a:hover { background-color:#000; text-decoration:underline; color: #0099FF; cursor: hand; } .navbar ul li a:hover ul { display:block; position:absolute; z-index: 998; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em; } .navbar ul li a:hover ul li a { display:block; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; background-color:#000; font-weight:normal; color:#FFF; } .navbar ul li a:hover ul li a ul { visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997; } .navbar ul li a:hover ul li a:hover { background-color:#000; text-decoration:underline; } </style> </head> <body> <div class="navbar"> <ul> <li> <a href="#">menu item 1</a> <ul style="top:0px" > <li style="width:288px;"><center><a href="#" onmouseover="movedown()" onmouseout="stopscroll()"><img src="images/menu-arrow-down.png" width="8" height="6" alt="Down"></a></center></li> <script> //<![CDATA[ var speed=2 iens6=document.all||document.getElementById ns4=document.layers if (iens6){ document.write('<div id="container" style="position:relative;width:310px;height:165px;overflow:hidden;border:0px solid #205284">') document.write('<div id="content" style="position:absolute;width:290px;left:0px;top:-1px;">') } //]]></script> <ilayer name="nscontainer" width="190"> <layer name="nscontent" width="290" height="155" visibility="hidden"> <li style="top:-1px;"><a href="#">sub menu item 1 menu item 1</a></li> <li style="top:-1px;"><a href="#">sub menu item 2 menu item 1</a></li> <li style="top:-1px;"><a href="#">sub menu item 3</a></li> <li style="top:-1px;"><a href="#">sub menu item 1</a></li> <li style="top:-1px;"><a href="#">sub menu item 1</a></li> <li style="top:-1px;"><a href="#">sub menu item 2</a></li> <li style="top:-1px;"><a href="#">sub menu item 3</a></li> <li style="top:-1px;"><a href="#">sub menu item 1</a></li> <li style="top:-1px;"><a href="#">sub menu </a></li> <li style="top:-1px;"><a href="#">sub menu </a></li> <li style="top:-1px;"><a href="#">sub menu </a></li> <li style="top:-1px;"><a href="#">sub menu </a></li> <li style="top:-1px;"><a href="#">sub menu </a></li> <li style="top:-1px;"><a href="#">sub menu</a></li> </layer> </ilayer> <script> //<![CDATA[ if (iens6) { document.write('</div></div>') var crossobj=document.getElementById? document.getElementById('content') : document.all.content //alert("document.getElementById('content').offsetHeight :"+ document.getElementById('content').offsetHeight); alert("crossobj.prototype.outerHeight" + crossobj.prototype.outerHeight); var contentheight=crossobj.offsetHeight //var contentheight=document.getElementById('content').style.height; //alert("ContentHeight :"+contentheight); } else if (ns4) { var crossobj=document.nscontainer.document.nscontent var contentheight=crossobj.clip.height } function movedown(){ if (window.moveupvar) clearTimeout(moveupvar) { if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100)) { crossobj.style.top=parseInt(crossobj.style.top)-speed+"px" } else if(ns4&&crossobj.top>=(contentheight*(-1)+100)) { crossobj.top-=speed } /*else { crossobj.style.top=parseInt(crossobj.style.top)-speed+"px" }*/ } movedownvar=setTimeout("movedown()",20) } function moveup() { if (window.movedownvar) clearTimeout(movedownvar) { if (iens6&&parseInt(crossobj.style.top)<=0) { crossobj.style.top=parseInt(crossobj.style.top)+speed+"px" } else if (ns4&&crossobj.top<=0) { crossobj.top+=speed } moveupvar=setTimeout("moveup()",20) } } function getcontent_height() { if (iens6) { //alert("getcontent_height : "+document.getElementById("content").style.height); //contentheight=document.getElementById("content").style.height; contentheight=crossobj.offsetHeight } else if (ns4) { document.nscontainer.document.nscontent.visibility="show" } } window.onload=getcontent_height; //]]></script> <li><center><a href="#" onmouseover="moveup()" onmouseout="stopscroll()"><img src="images/menu-arrow-down.png" width="8" height="6" alt="Down"></a> </center></li> </ul> </li> </ul> </div> </body> </html>推荐答案
有时offsetHeight会返回零，因为您拥有的元素创建的图像尚未在Dom中呈现。我在这种情况下编写了此函数：
Sometimes offsetHeight will return zero because the element you've created has not been rendered in the Dom yet. I wrote this function for such circumstances:
function getHeight(element) { element.style.visibility = "hidden"; document.body.appendChild(element); var height = element.offsetHeight + 0; document.body.removeChild(element); element.style.visibility = "visible"; return height; }更多推荐
元素offsetHeight始终为“ 0”。
发布评论