Obtener el alto de un elemento antes de agregarlo al DOM

¿Hay alguna forma de obtener la altura de un elemento antes de agregarlo al DOM? Sé que CustomerHeight no funciona como lo he intentado y siempre devuelve 0. ¿Hay otros métodos que pueden devolver la altura o el elemento tiene que ser parte del DOM para calcular la altura?Obtener el alto de un elemento antes de agregarlo al DOM

Esta es una muestra de lo que voy para:

function test(a) { 
    var a=document.createElement(a) 
    a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px' //fixed position in CSS 
    document.body.appendChild(a) 
    }

* Nota: Esto es sólo una versión simplificada de la función que estoy trabajando con el fin de proyectar lo que estoy tratando de lograr sin todo el lío innecesario.

Fuente

2011-05-10 Ruffy

Los diferentes elementos tienen diferentes propiedades. Necesitamos saber tipos específicos si quieres una buena respuesta. – Kayla

Los elementos no tienen altura, en cualquier sentido real, hasta que se hayan agregado al DOM, ya que sus estilos no se pueden evaluar hasta entonces.

Puede solucionar esto fácilmente usando visibility: hidden para que el elemento se pueda agregar al DOM (y se determine su altura) sin causar un parpadeo visible. (jsFiddle)

function test(a) { 
    var a=document.createElement(a); 
    a.style.visibility = "hidden"; 
    document.body.appendChild(a); 
    a.style.top=(window.innerHeight/2-a.clientHeight/2)+'px'; 
    a.style.visibility = ""; 
}

(Esto está trabajando en el supuesto de que usted está utilizando top debido a que el elemento se coloca o se fija absolutamente. Si no lo fuera, lo que se necesita para que así sea temporalmente.) Oculto los elementos aún ocupan espacio en el DOM (por lo tanto, deben calcularse sus tamaños), pero el usuario no puede verlos en realidad.

Fuente

2011-05-10 00:53:52

El parpadeo no es el problema porque es prácticamente instantáneo. Editar: ¡Esto funciona! Pensé que cambiar las propiedades de los elementos como variables después de agregarlos no tendría ningún efecto, pero evidentemente lo hace, y eso es tan bueno como la solución que estaba buscando. – Ruffy

@Jimmy - No estoy seguro de lo que quieres decir. 'a' aún se puede manipular normalmente después de agregarlo al DOM. Cualquier cambio que pueda afectar la altura debe colocarse entre las líneas 'appendChild' y' a.top', pero aparte de eso, todo debería funcionar como se esperaba. –

Me di cuenta de que cometí un error en mi función la primera vez que lo intenté (la función real tiene numerosos elementos dentro de cada uno). Funcionó cuando lo agregué después de colocarlo al final, que es prácticamente la solución que estoy buscando, aunque sea en un orden diferente. – Ruffy

Obtener el alto de un elemento antes de agregarlo al DOM

Respuesta

Cuestiones relacionadas