jQuery: height () / width () y “display: none”

Siempre pensé en los elementos que tenían display:none estilo CSS devuelto 0 para height() y width() .

Pero en este ejemplo:

HTML

 
a

CSS

 alert($("#target").height()); 

no lo hacen: http://jsfiddle.net/Gts6A/2/

¿Cómo? He visto 0 volver muchas veces en el pasado.

Si un elemento tiene un offsetWidth de 0 (jQuery está considerando esto “oculto”), marcado aquí , entonces intenta averiguar cuál debe ser la altura. Establece las siguientes propiedades en el elemento a través de jQuery.swap() durante la verificación:

  • position: "absolute"
  • visibility: "hidden"
  • display: "block"

Luego obtiene la altura, a través de getWidthOrHeight(...) que agrega borde / relleno si es necesario a través de augmentWidthOrHeight(...) según el modelo de caja, y revierte todas las propiedades anteriores a sus valores anteriores.

Básicamente, se trata de tomar el elemento, mostrarlo fuera del flujo del documento, obtener la altura y luego ocultarlo de nuevo, todo antes de que el hilo de la interfaz de usuario se actualice para que nunca vea que esto suceda. Está haciendo esto para que .height() / .width() funcione, incluso en elementos que están ocultos, siempre y cuando sus padres estén visibles … para que pueda ejecutar .height() / .width() , sin hacer el muestra / oculta el truco que está haciendo en tu código, se maneja dentro de .height() y .width() .

EDITAR

Esto parece haber sido corregido desde jQuery 1.4.4

Ejemplo: http://jsfiddle.net/GALc7/1/


Creo que esto solo es cierto para los elementos cuyo padre es “display: none”

Ver este artículo sobre el tema http://dev.jquery.com/ticket/125

Además, vea este ejemplo (guarde como un archivo .html) o vea ( http://jsfiddle.net/GALc7/ )

    Example