Element offsetHeight siempre "0"

¿Por qué obtengo Element offsetHeight "0"? Incluso elemento de la altura original no está mostrandoElement offsetHeight siempre "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>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>

Fuente

2011-08-04 kumarjcet

Usted está tratando de obtener offsetHeight de un elemento oculto. el css .navbar ul li ul tiene display:none que haría que todo su contenido sea invisible, incluido crossobj y no se puede obtener la altura de los elementos que no se muestran, su altura se pone simplemente 0.

Fuente

2011-08-04 07:41:31

Gracias hola para ur respuesta .... basado en que sólo el menú sobre su submenú dispalying Si quito media que por defecto su menú y submenú mostrando ... u puede ayudar para evitar esto ... – kumarjcet

hay un truco para este problema que puede colocar su etiqueta alrededor de -1000px -1000px en lugar de usar 'display: none', y luego usar' offsetHeight' para medir la altura, y en lugar de cambiar la pantalla deberá cambiar la posición para que la etiqueta sea visible –

Otro "truco" es establecer momentáneamente la visibilidad de los objetos a hidden, su pantalla para bloquear. Y luego obtenga el offsetHeight. A continuación, simplemente invierta eso al configurar la pantalla en none y la visibilidad en visible. Por supuesto, esto solo funcionará si no interrumpe el flujo del diseño de la página (es decir, todo cambia en la página como si algo estuviera allí, pero no se muestra nada en el espacio). Pero si se trata de algo que está indexado en z o flotante o quizás en una posición absoluta, debería funcionar bien.

Fuente

2012-03-23 06:02:30

A veces offsetHeight devolverá cero porque el elemento que ha creado aún no se ha representado en la Dom. Escribí esta función para estas circunstancias:

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; 
}

Fuente

2015-01-01 09:11:08

Tuve un problema con el elemento que desapareció de su ubicación original. Añadiendo 'element = element.cloneNode (true);' al principio de la función lo solucionó. – Sammi

Respuesta

Cuestiones relacionadas