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


406

¿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.


Respuestas:


183

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!


1
Una palabra: ¡genial! Gracias por la participación de todos. Mucha información buena sobre este hilo. Esto me permitirá centrar páginas usando CSS pero usar jQuery para hacer que la altura total del div "contenedor" sea correcta sin aventurarme en CSS Hackville. Gracias de nuevo.
BuddyJoe

3
incluso si NO está usando jQuery o no puede o no quiere, sugiero encarecidamente que cualquiera que implemente esto use solo offsetHeight continúe y descargue la fuente jQuery y busque "altura" para encontrar el código que usan. hay muchas cosas locas pasando allí!
Simon_Weaver

1
@matejkramny - Esta pregunta y respuesta fue hace más de 5 años . El OP ya estaba usando jQuery en su sitio, por lo que en lugar de volver a implementar la misma lógica o la misma, ¿por qué no usar la función jQuery de una línea que ya lo hace? Estoy de acuerdo en que jQuery es excesivo para muchas cosas y no le temo a vanilla JS, pero cuando hay una función en una biblioteca que hace exactamente lo que necesita, parece una tontería no usarla, particularmente por razones de "No inventado aquí"
Russ Cam

3
@matejkramny La intención de los OP al hacer la pregunta era obtener la altura representada del elemento, no entender lo que está sucediendo en el DOM y detrás de escena; si esa era su intención, hicieron la pregunta equivocada. Estoy de acuerdo en que las personas deberían estar inclinadas a comprender las bibliotecas y los marcos que usan, el conocimiento es poder y todo eso, pero a veces uno solo quiere una respuesta a una pregunta específica. De hecho, los comentarios anteriores ya sugieren mirar a través del código jQuery para comprender lo que sucede detrás de escena.
Russ Cam

22
Para el OP, usar jQuery es una respuesta válida. Para el resto del mundo que vea esto desde entonces, la respuesta que no sea jQuery es la mejor. Quizás SO necesita adaptarse a esa realidad, tal vez las respuestas más votadas deberían destacarse de alguna manera más que las aceptadas.
Dimitris

1220

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.


3
Gracias, no sabía sobre esta propiedad. También es compatible con IE8 +.
lyubeto

Estoy perplejo con el significado de clientHeight. Tengo un elemento div que tiene un montón de elementos p y el contenido va mucho más allá del área visible del navegador hacia abajo. Y esperaba que clientHeight diera la altura renderizada, y scrollHeight para dar la longitud completa. Pero son casi iguales (solo difieren por margen, relleno, etc.).
bahti

10
@bahti a menos que tenga una altura limitada y un desbordamiento: oculto o alguna forma de desbordamiento: desplácese, el elemento se expandirá (ya sea a su vista o no) para mostrar todo el contenido y scrollHeight y clientHeight serán iguales.
Ulad Kasach

44
Gran respuesta, pero lógicamente, los bordes que afectan la altura de un elemento son los bordes superior e inferior, que son horizontales. Esta respuesta se refiere a ellos como "bordes verticales". Pensé que dejaría caer mis 2 centavos
Kehlan Krumme

1
Por lo que sé, .clientWidth/.clientHeight NO incluya el ancho de desplazamiento si se muestra el desplazamiento. Si desea incluir el ancho de desplazamiento, puede usar element.getBoundingClientRect().width en su lugar
Dmitry Gonchar


49

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()


1
Gracias. Al trabajar con flotadores, tuve muchos problemas con la altura automática, pero no tenía experiencia en ese momento. Por lo general, no he estado configurando la altura, excepto en un script de diseño complejo donde inicialmente borro el campo pero lo configuro para que sea igual para cada bloque (Div) que termina con la misma parte superior. Incluso una diferencia de un píxel entre bloques puede atornillar el diseño al cambiar el tamaño de las ventanas.
DHorse

1
Por cierto, creo que offset tiene algunos usos dependientes de la versión del navegador con respecto a los márgenes que esto elimina.
DHorse

2
La pregunta no requiere jQuery. Ugh
dthree

1
@dthree Creo que mencionó claramente que está usando jQuery. (también incluido en las etiquetas) :)
abierto y gratuito el

45

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

1
getBoundingClientRect (). height devuelve un número de coma flotante (mientras que los demás devuelven un entero), agradable :)
Ari

31
style = window.getComputedStyle(your_element);

entonces simplemente: style.height


14

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.


Vi tu otro comentario en el nivel de pregunta. Estoy vendido en jQuery. Han estado por un rato. Pero esto selló el trato. Estoy enamorado del hecho de que esto simple va a resolver cientos de problemas de diseño para mí (principalmente en sitios de Intranet donde sé que se está ejecutando JavaScript).
BuddyJoe

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

44
agregue explicación a su solución
Freelancer

luego offsetHeight
Ritwik

66
Esta propiedad redondeará el valor a un entero . Si necesita un valor flotante , useelem.getBoundingClientRect().height
Penny Liu

12

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()'>

Es útil y uso algo similar en un código más complejo.
DHorse

10

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?


1
var geometry; geometry={};simplemente puede servar geometry={};
Mark Schultheiss

10

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>


8

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. Bloque de menú representado normalmente Bloque de menú agregado al elemento DOM Temp

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).
ingrese la descripción de la imagen aquí

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.


6

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é).


interesante. Nunca he comprobado el prototipo. ¿Alguna idea de por qué jQuery no hace eso detrás de escena?
Simon_Weaver

Lo vi cuando tuve dificultades y probé esa técnica y funcionó bastante bien en JavaScript simple
DHorse

5

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;
}

necesita clonar el elemento; de lo contrario, se eliminará del dom completamente, parece que de su código eso es lo que sucederá.
punkbit

Este código no está destinado a mantener el elemento en el DOM. Está destinado a ponerlo en el DOM brevemente (lo suficiente como para representarlo y obtener su altura), luego lo saca. Más tarde, puede colocar el elemento en el dom en otro lugar más tarde (sabiendo cuál será su altura antes de hacerlo). Observe el nombre de la función "getHeight"; eso es todo lo que el código intenta hacer.
Lonnie Best

@punkbit: veo a qué te refieres. Tu elemento ya está en el dom. El código que escribí es para un elemento que aún no está en el DOM. La clonación sería mejor, como usted dice, porque no importaría si el elemento está en el dom o no.
Lonnie Best

@punkbit: modifiqué el código usando la clonación, pero no lo he probado.
Lonnie Best

Sí, ese era mi punto. Me pareció que él dice "elemento" para un elemento existente en el DOM. Pero todo bien! No te equivoques.
punkbit

4

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()).


Una vez que tenga la altura desde getComputedStyle, use parseInt(h, 10)para obtener un número entero para los cálculos.
RhodanV5500


1

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');
    } 
}

-4

¿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;

8
offsetHeight es una propiedad del elemento en sí, no de su estilo.
Shog9
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.