javascript - mismo - mostrar y ocultar div con jquery ejemplos

Necesidad de encontrar la altura del div oculto en la página(configurado para mostrar: ninguno)

Question

Necesito medir el offsetHeight de un div que está dentro de un elemento oculto.

<div id="parent" style="display: none;">
    <div id="child">Lorem Ipsum dolor sit amet.</div>
</div>

El div principal debe configurarse en " display:none ". No tengo control sobre eso. Me doy cuenta de que la altura de la división infantil va a ser 0. Necesito encontrar una solución alternativa.

Algo con lo que he jugado es cuando la página se carga, copio los childnodes de los padres e inyecto un div en la página que está configurado como " visiblity:hidden ". Luego mido la altura de esos elementos y elimino los nodos cuando termine.

¿Algún otro pensamiento?

Actualización: Lo que terminé por hacer fue esto:

Al usar YUI 2, en la carga de la página, encontré todos los elementos de ese nombre de clase dado que estaban configurados para mostrarse: ninguno, o cuya altura y ancho era 0 (esa es una manera de medir si un elemento existe o si un padre está configurado para mostrarse :ninguna). Entonces configuro ese elemento para mostrar: bloque. Luego verifiqué a su padre para la misma cosa y mostré a los padres hasta que encuentre un padre visible. Una vez que se muestra la pantalla más alta: ningún ancestro está configurado para mostrar: bloque, puedo medir mi elemento.

Una vez que se miden todos los elementos, vuelvo a mostrar todos los elementos para mostrar: ninguno.

Answer 1

¿Intentaste esto?

setTimeout(''alert($(".Var").height());'',200); 

Answer 2

Así que aquí está la solución jQuery en función de la respuesta de lod3n y con la ayuda del comentario de 999:

var getHiddenElementHeight = function(element){ var tempId = ''tmp-''+Math.floor(Math.random()*99999);//generating unique id just in case $(element).clone() .css(''position'',''absolute'') .css(''height'',''auto'').css(''width'',''1000px'') //inject right into parent element so all the css applies (yes, i know, except the :first-child and other pseudo stuff.. .appendTo($(element).parent()) .css(''left'',''-10000em'') .addClass(tempId).show() h = $(''.''+tempId).height() $(''.''+tempId).remove() return h; }

¡Disfrutar!

Answer 3

Hasta que el elemento esté renderizado, no tiene altura. Incluso si clona el objeto principal y lo muestra en un lugar que el usuario no puede ver, no hay garantía de que el clon tenga la misma altura que el tamaño final del objeto oculto.

Hay muchas cosas que pueden afectar la altura que no se representaría necesariamente en el clon: cualquier cosa en el DOM y su interacción con las reglas de CSS podrían causar un cambio en la representación de cualquier otro elemento del DOM. Si no se clona todo el documento (e incluso eso no es infalible), no tiene forma de determinar la altura del objeto oculto.

Si debe conocer la altura antes de que se la muestre al usuario, tendrá que "piratearla" mostrándola durante el menor tiempo posible y luego ocultándola nuevamente. Lo más probable es que el usuario vea este problema y no esté satisfecho con el resultado.

Answer 4

Hizo una solución js pura sin Jquery y sin clonación (lo que creo que es más rápido)

var getHeight = function(el) {
    var el_style      = window.getComputedStyle(el),
        el_display    = el_style.display,
        el_position   = el_style.position,
        el_visibility = el_style.visibility,
        el_max_height = el_style.maxHeight.replace(''px'', '''').replace(''%'', ''''),

        wanted_height = 0;

    // if its not hidden we just return normal height
    if(el_display !== ''none'' && el_max_height !== ''0'') {
        return el.offsetHeight;
    }

    // the element is hidden so:
    // making the el block so we can meassure its height but still be hidden
    el.style.position   = ''absolute'';
    el.style.visibility = ''hidden'';
    el.style.display    = ''block'';

    wanted_height     = el.offsetHeight;

    // reverting to the original values
    el.style.display    = el_display;
    el.style.position   = el_position;
    el.style.visibility = el_visibility;

    return wanted_height;
}

Aquí está la demostración https://jsfiddle.net/xuumzf9k/1/

Déjeme saber si puede encontrar alguna mejora en esto (ya que lo uso en mis proyectos principales)

Answer 5

Lo que terminé por tener que hacer fue esto:

Al usar YUI 2, en la carga de la página, encontré todos los elementos de ese nombre de clase dado que estaban configurados para mostrarse: ninguno, o cuya altura y ancho era 0 (esa es una manera de medir si un elemento existe o si un padre está configurado para mostrarse :ninguna). Entonces configuro ese elemento para mostrar: bloque. Luego verifiqué a su padre para la misma cosa y mostré a los padres hasta que encuentre un padre visible. Una vez que se muestra la pantalla más alta: ningún ancestro está configurado para mostrar: bloque, puedo medir mi elemento.

Una vez que se miden todos los elementos, vuelvo a mostrar todos los elementos para mostrar: ninguno.

Answer 6

Necesitas hacer que el elemento principal de element esté visible durante ese breve momento mientras obtienes las dimensiones de element. En una solución genérica, todos los antepasados ​​suelen atravesarse y se hacen visibles. A continuación, sus valores de display se establecen en los originales.

Hay problemas de rendimiento, por supuesto.

Consideramos este enfoque en la implementación de Prototype.js, pero terminamos con getWidth y getHeight haciendo solo visible el elemento real , sin atravesar a los ancestros.

El problema con las soluciones alternativas, como quitar el elemento del padre "oculto", es que ciertos estilos pueden dejar de aplicarse a un elemento una vez que está fuera de su jerarquía "regular". Si tienes una estructura como esta:

<div class="foo" style="display:none;">
  <div class="bar">...</div>
</div>

y estas reglas:

.bar { width: 10em; }
.foo .bar { width: 15em; }

luego, sacar el elemento de su elemento primario realmente resultará en dimensiones incorrectas.

Answer 7

Podría clonar el elemento, posicionarlo absolutamente en -10000, -10000, medir el clon y destruirlo.

Answer 8

Por lo tanto, ni siquiera se puede cambiar la display:none; a la height:0; overflow:hidden; height:0; overflow:hidden; ? Tal vez usted podría anular eso en su propia hoja de estilo así:

div#parent { display: block !important; height:0; overflow:hidden; }

Y luego, a medida que usa YUI (suponiendo que YUI 2) puede usar esto:

var region = YAHOO.util.Dom.getRegion(''child'');

Para obtener las dimensiones y desplazamiento del niño.

Answer 9

Si usa style.display = "none" , el elemento tendrá 0 de ancho y alto,
pero al usar style.visibility = "hidden" lugar, el elemento tendrá el ancho y la altura calculados por el navegador (normalmente).

Answer 10

Tratar de usar:

#parent{ display:block !important; visibility:hidden; position:absolute} 

Answer 11

Use z-index para ocultar el elemento debajo del elemento no transparente, mostrarlo y obtener altura.