javascript - div - obtener altura elemento jquery
¿Por qué jquery devolvería 0 para un offsetHeight cuando Firebug dice que es 34? (5)
Así que tengo un div cuyo contenido se genera en tiempo de ejecución, inicialmente no tiene altura asociada. Cuando se genera de acuerdo con Firebug y por lo que puedo alertar con js, el div todavía tiene una altura de 0. Sin embargo, al mirar las propiedades de solo lectura con Firebug puedo ver que tiene una altura de desplazamiento de 34. Es este valor que Necesito. Esperemos que sea obvio, pero en caso de que no lo sea, este número es variable, no siempre es 38.
Entonces, pensé que podría conseguirlo haciendo esto a través de jquery ...
$("#parentDiv").attr(''offsetHeight'');
o esto con js recta ...
document.getElementById("parentDiv").offsetHeight;
Pero todo lo que se devuelve es 0. ¿Tiene algo que ver con el hecho de que la altura de desplazamiento es una propiedad de solo lectura en esta instancia? ¿Cómo puedo obtener esta altura? Quiero decir que Firebug está averiguando de alguna manera, así que parece que debería ser capaz de hacerlo.
Editar: Aquí hay una muestra de cómo se ve el div en este momento ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src=''../images/image.gif''); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" />
</DIV>
</DIV>
</DIV>
</DIV></FORM></BODY></HTML>
Este código está siendo generado por un control en una biblioteca separada. Así que aquí está el código real que lo crea en mi página .aspx.
<blah:blahControl ID="control" runat="server" />
Ok, está editado ligeramente, pero eso es mucho más HTML que antes. El div al que me refería como "parentDiv" antes se llama "ctl00_BodyContentPlaceHolder_UserControl" allá arriba. Ese código incluye el div en cuestión, es hermano, padre, abuelo e hijos. Es casi una copia directa de Firebug.
Actualización: Debería haber mencionado que esto se está haciendo en IE 7. Parecía funcionar bien una vez en Firefox, pero ahora devuelve 0. ¿Esto proporciona nuevos conocimientos sobre posibles soluciones alternativas o algo así?
... Todos deben pensar que estoy loco.
Actualización: algunos estilos ...
.TransparentBg
{
background-color: white;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.Foreground
{
position: absolute;
top: 0px;
}
¿Estás seguro de que el elemento está incluido en el árbol de documentos y procesado? (es decir, no "mostrar: ninguno", pero "visibilidad: oculto" está bien).
Un elemento que no está realmente tomando parte en el proceso de representación del documento no tiene dimensiones, y dará un offsetWidth / Height de 0.
ETA después de agregar la muestra de código: con su código exacto, obtengo offsetHeight en el div de ''17''. La primera imagen tiene el tamaño correcto, la segunda no tiene tamaño.
Esto es correcto según se representa (*). Cualquier imagen que no se carga se reemplaza por su texto alternativo como un tramo en línea. Su imagen no tiene texto alternativo, por lo que se reemplaza por una cadena vacía. Normalmente, como un elemento en línea, no se puede configurar en ningún tamaño en particular. La excepción es la primera imagen, porque le has dado ''display: block'', que lo hace susceptible al tamaño explícito proporcionado por ancho / alto.
En el modo Quirks, tendrías iconos pequeños de "imagen rota" del mismo tamaño que se suponía que eran las imágenes. Esto no ocurre en el Modo Estándares porque se supone que usted sabe cómo usar el texto alternativo correctamente si usa estándares.
De cualquier manera, la medición de dimensiones funciona bien para mí si reemplazo las URL "..." con direcciones de trabajo reales.
(*: aunque en realidad no se puede ver debido al comodín ''overflow-hidden'' en html y ''left: 1597px;'' bastante extraño, ¡bueno, a menos que tengas un monitor realmente amplio!)
¿Estás seguro de que no es un Heisenbug ? Si establece la altura en algún lugar mediante programación y luego intenta leerla más tarde, existe la posibilidad de que DOM no se haya actualizado.
Acabo de encontrar un problema en el que obtenía el offsetHeight de un elemento cuando el documento estaba listo pero estaba en un contenedor que estaba oculto .
Resultó en un valor de offsetHeight de 0, pero Firebug dijo que tenía una altura de 32.
Al cargar este archivo con un IMG SRC válido, se obtienen 3 cuadros de alerta de "37". Sin IMG SRC válido da "17" en los tres. ¿Qué versión de Jquery estás usando? ¿Y qué versión de FireFox / IE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<script type="text/javascript" src="jquery.js"></script>
</HEAD>
<BODY>
<FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post">
<DIV id="container">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px">
<DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center">
</DIV>
<DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center">
<DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal">
<IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src=''../images/image.gif''); CURSOR: pointer" height="52" hspace="0" src="..." width="52" />
</DIV>
<DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl">
<IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
<IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" />
</DIV>
</DIV>
</DIV>
<script type="text/javascript">
$(window).load(function () {
alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr(''offsetHeight''));
alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight);
alert($("#ctl00_BodyContentPlaceHolder_UserControl").height());
});
</script>
</DIV>
</FORM>
</BODY>
Intente llamar a la función de compensación una vez que todos los DOM y las imágenes estén completamente cargados usando load () en lugar de document.ready ().
$ (window) .load (function () {// Pon aquí el código para la altura});