¿Cómo se obtiene la altura renderizada de un elemento?

¿Cómo se obtiene la altura renderizada de un elemento?

Digamos que tiene un <div>elemento con algún contenido dentro. Este contenido en el interior va a estirar la altura de la <div>. ¿Cómo se obtiene la altura "representada" cuando no se ha establecido explícitamente la altura. Obviamente, intenté:

var h = document.getElementById('someDiv').style.height;

¿Hay algún truco para hacer esto? Estoy usando jQuery si eso ayuda.

Debería ser

$('#someDiv').height();

con jQuery. Esto recupera la altura del primer elemento del conjunto envuelto como un número.

Tratando de usar

.style.height

solo funciona si ha configurado la propiedad en primer lugar. ¡No muy útil!

Pruebe uno de:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight Incluye la altura y el acolchado vertical.

offsetHeight incluye la altura, el relleno vertical y los bordes verticales.

scrollHeight incluye la altura del documento contenido (sería mayor que la altura en caso de desplazamiento), el relleno vertical y los bordes verticales.

NO JQUERY ya que había un montón de enlaces elem.style.heighten la parte superior de estas respuestas ...

ALTURA INTERNA:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

ALTURA EXTERIOR:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight; 

O una de mis referencias favoritas: http://youmightnotneedjquery.com/

Puedes usar .outerHeight()para este propósito.

Le dará la altura total del elemento. Además, no necesita establecer ninguno css-heightde los elementos. Por precaución, puede mantener su altura automática para que pueda representarse según la altura del contenido.

//if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

// if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

Para una visión clara de estas funciones, puede ir al sitio de jQuery o una publicación detallada aquí .

aclarará la diferencia entre .height()/ innerHeight()/outerHeight()

Lo uso para obtener la altura de un elemento (devuelve flotante) :

document.getElementById('someDiv').getBoundingClientRect().height

También funciona cuando usas el DOM virtual . Lo uso en Vue así:

this.$refs['some-ref'].getBoundingClientRect().height

style = window.getComputedStyle(your_element);

entonces simplemente: style.height

Definitivamente uso

$('#someDiv').height()   // to read it

o

$('#someDiv').height(newHeight)  // to set it

Estoy publicando esto como una respuesta adicional porque hay un par de cosas importantes que acabo de aprender.

Casi me caigo en la trampa justo ahora de usar offsetHeight. Esto es lo que pasó :

• Utilicé el viejo truco de usar un depurador para 'ver' qué propiedades tiene mi elemento
• Vi cuál tiene un valor alrededor del valor que esperaba
• Era offsetHeight, así que lo usé.
• Entonces me di cuenta de que no funcionaba con un DIV oculto
• Intenté esconderme después de calcular maxHeight, pero eso parecía torpe: me metí en un lío.
• Hice una búsqueda, descubrí jQuery.height () y lo usé
• altura descubierta () funciona incluso en elementos ocultos
• solo por diversión, verifiqué la implementación de jQuery de alto / ancho

Aquí hay solo una parte:

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
) 

Sí, mira AMBOS desplazamiento y desplazamiento. Si eso falla, se ve aún más lejos, teniendo en cuenta los problemas de compatibilidad del navegador y CSS. En otras palabras, MUCHAS COSAS QUE NO ME IMPORTA - o quiero.

Pero no tengo que hacerlo. Gracias jQuery!

Moraleja de la historia: si jQuery tiene un método para algo, probablemente sea por una buena razón, probablemente relacionada con la compatibilidad.

Si no ha leído la lista de métodos de jQuery recientemente, le sugiero que eche un vistazo.

document.querySelector('.project_list_div').offsetHeight;

Hice un código simple que ni siquiera necesita JQuery y probablemente ayude a algunas personas. Obtiene la altura total de 'ID1' después de la carga y la usa en 'ID2'

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

Luego simplemente configura el cuerpo para cargarlo

<body onload='anyName()'>

Hm podemos obtener la geometría del elemento ...

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

¿Qué tal este simple JS?

Creo que la mejor manera de hacer esto en 2020 es usar JS y getBoundingClientRect().height;

Aquí hay un ejemplo

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

Además de hacerlo de heightesta manera, también tenemos acceso a un montón de otras cosas sobre el div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

Entonces, ¿es esta la respuesta?

"Si necesita calcular algo pero no mostrarlo, establezca el elemento en visibility:hiddenyposition:absolute , agréguelo al árbol DOM, obtenga el offsetHeight y elimínelo (eso es lo que hace la biblioteca prototipo detrás de las líneas la última vez que lo verifiqué)".

Tengo el mismo problema en varios elementos. No hay jQuery o Prototype para usar en el sitio, pero estoy a favor de tomar prestada la técnica si funciona. Como ejemplo de algunas cosas que no funcionaron, seguido de lo que hizo, tengo el siguiente código:

// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
    var DoOffset = true;
    if (!elementPassed) { return 0; }
    if (!elementPassed.style) { return 0; }
    var thisHeight = 0;
    var heightBase = parseInt(elementPassed.style.height);
    var heightOffset = parseInt(elementPassed.offsetHeight);
    var heightScroll = parseInt(elementPassed.scrollHeight);
    var heightClient = parseInt(elementPassed.clientHeight);
    var heightNode = 0;
    var heightRects = 0;
    //
    if (DoBase) {
        if (heightBase > thisHeight) { thisHeight = heightBase; }
    }
    if (DoOffset) {
        if (heightOffset > thisHeight) { thisHeight = heightOffset; }
    }
    if (DoScroll) {
        if (heightScroll > thisHeight) { thisHeight = heightScroll; }
    }
    //
    if (thisHeight == 0) { thisHeight = heightClient; }
    //
    if (thisHeight == 0) { 
        // Dom Add:
        // all else failed so use the protype approach...
        var elBodyTempContainer = document.getElementById('BodyTempContainer');
        elBodyTempContainer.appendChild(elementPassed);
        heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
        elBodyTempContainer.removeChild(elementPassed);
        if (heightNode > thisHeight) { thisHeight = heightNode; }
        //
        // Bounding Rect:
        // Or this approach...
        var clientRects = elementPassed.getClientRects();
        heightRects = clientRects.height;
        if (heightRects > thisHeight) { thisHeight = heightRects; }
    }
    //
    // Default height not appropriate here
    // if (thisHeight == 0) { thisHeight = elementHeightDefault; }
    if (thisHeight > 3000) {
        // ERROR
        thisHeight = 3000;
    }
    return thisHeight;
}

que básicamente intenta cualquier cosa y todo solo para obtener un resultado cero. ClientHeight sin afectar. Con los elementos del problema, normalmente obtengo NaN en la Base y cero en las alturas de Desplazamiento y Desplazamiento. Luego probé la solución Agregar DOM y clientRects para ver si funciona aquí.

El 29 de junio de 2011, de hecho, actualicé el código para intentar agregar a DOM y clientHeight con mejores resultados de lo que esperaba.

1) clientHeight también fue 0.

2) Dom realmente me dio una altura que fue genial.

3) ClientRects devuelve un resultado casi idéntico a la técnica DOM.

Debido a que los elementos agregados son de naturaleza fluida, cuando se agregan a un elemento DOM Temp vacío, se representan de acuerdo con el ancho de ese contenedor. Esto se vuelve extraño, porque es 30px más corto de lo que finalmente termina.

Agregué algunas instantáneas para ilustrar cómo la altura se calcula de manera diferente.

Las diferencias de altura son obvias. Ciertamente podría agregar posicionamiento absoluto y oculto, pero estoy seguro de que no tendrá ningún efecto. ¡Seguí convencido de que esto no funcionaría!

(Me desvío más) La altura sale (se renderiza) más baja que la altura real renderizada. Esto podría abordarse estableciendo el ancho del elemento DOM Temp para que coincida con el padre existente y podría hacerse con bastante precisión en teoría. Tampoco sé qué resultaría de eliminarlos y agregarlos nuevamente a su ubicación actual. Cuando llegaron a través de una técnica innerHTML, buscaré usando este enfoque diferente.

* SIN EMBARGO * Nada de eso era necesario. De hecho, funcionó según lo anunciado y devolvió la altura correcta.

Cuando pude volver a ver los menús de manera sorprendente, DOM había devuelto la altura correcta según el diseño fluido en la parte superior de la página (279 px). El código anterior también usa getClientRects que devuelve 280px.

Esto se ilustra en la siguiente instantánea (tomada de Chrome una vez que funciona).

Ahora no tengo ni idea de por qué funciona ese truco prototipo, pero parece que sí. Alternativamente, getClientRects también funciona.

Sospecho que la causa de todos estos problemas con estos elementos en particular fue el uso de innerHTML en lugar de appendChild, pero eso es pura especulación en este momento.

offsetHeight, generalmente.

Si necesita calcular algo pero no mostrarlo, configure el elemento en visibility:hiddeny position:absolute, agréguelo al árbol DOM, obtenga offsetHeighty elimínelo. (Eso es lo que hace la biblioteca prototipo detrás de escena la última vez que lo revisé).

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

function getHeight(element)
{
    var e = element.cloneNode(true);
    e.style.visibility = "hidden";
    document.body.appendChild(e);
    var height = e.offsetHeight + 0;
    document.body.removeChild(e);
    e.style.visibility = "visible";
    return height;
}

Si ya está utilizando jQuery, su mejor apuesta es .outerHeight()o .height(), como se ha dicho.

Sin jQuery, puede marcar el tamaño de la caja en uso y agregar varios rellenos + bordes + clientHeight, o puede usar getComputedStyle :

var h = getComputedStyle (document.getElementById ('someDiv')). height;

h ahora será una cadena como un "53.825px".

Y no puedo encontrar la referencia, pero creo que escuché que getComputedStyle()puede ser costoso, por lo que probablemente no sea algo que desee llamar en cada window.onscrollevento (pero tampoco lo es jQuery's height()).

Con MooTools :

$('someDiv').getSize().y

Si entendí tu pregunta correctamente, entonces tal vez algo como esto podría ayudar:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}

¿Has establecido la altura en el CSS específicamente? Si no lo has hecho, debes usarlo en offsetHeight;lugar deheight

var h = document.getElementById('someDiv').style.offsetHeight;