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

webgl tutorial

Question

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

Digamos que tienes un elemento <div> con algo de contenido dentro. Este contenido interior va a estirar la altura de <div> . ¿Cómo se obtiene la altura "renderizada" cuando no se ha establecido explícitamente la altura? Obviamente, lo intenté:

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

¿Hay un truco para hacer esto? Estoy usando jQuery si eso ayuda.

Answer 1

¿Ha establecido la altura en el css específicamente? Si no has necesitado usar offsetHeight; en lugar de height

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

Answer 2

A veces, offsetHeight devolverá cero porque el elemento que ha creado aún no se ha procesado 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;
}

Answer 3

Con MooTools:

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

Answer 4

Definitivamente usar

$(''#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 ahora mismo 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 en torno al valor que esperaba
• Era offsetHeight, así que usé eso.
• 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é
• La altura descubierta () funciona incluso en elementos ocultos.
• Sólo por diversión, comprobé la implementación de jQuery de altura / anchura.

Aquí solo una parte de esto:

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

Sí, se ve en 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 COSAS QUE NO ME PREOCUPAN - o quiero.

Pero no tengo que hacerlo. Gracias jQuery!

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

Si no has leído la lista de métodos de jQuery recientemente, te sugiero que eches un vistazo.

Answer 5

Entonces, ¿es esta la respuesta?

"Si necesita calcular algo pero no mostrarlo, configure el elemento en visibility:hidden y position: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 tiempo que comprobé).

Tengo el mismo problema en una serie de 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, seguidas 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 de cero. ClientHeight sin efecto. Con los elementos problemáticos, normalmente obtengo NaN en la base y cero en las alturas de desplazamiento y desplazamiento. Luego probé la solución Add DOM y clientRects para ver si funciona aquí.

El 29 de junio de 2011, de hecho, actualicé el código para intentar agregar tanto a DOM como a clientHeight con mejores resultados de los 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 DOM vacío, se procesan de acuerdo con el ancho de ese contenedor. Esto se vuelve extraño, porque es 30px más corto de lo que eventualmente 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 (rinde) más baja que la altura real renderizada. Esto podría solucionarse estableciendo el ancho del elemento DOM Temp para que coincida con el padre existente y se podría hacer con bastante precisión en teoría. Tampoco sé qué resultaría de eliminarlos y volver a agregarlos a su ubicación existente. A medida que llegaron a través de una técnica innerHTML, buscaré utilizando este enfoque diferente.

* SIN EMBARGO * Nada de eso era necesario. De hecho, funcionó como lo anuncian y devolvió la altura correcta!

Cuando pude volver a ver los menús de forma sorprendente, DOM había devuelto la altura correcta según el diseño fluido en la parte superior de la página (279px). El código anterior también utiliza getClientRects que devuelven 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 de 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 punto.

Answer 6

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

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

Luego solo configura el cuerpo para cargarlo

<body onload=''anyName()''>

Answer 7

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 esta llanura JS?

Answer 8

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 relleno vertical.

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

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

Answer 9

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

Te dará la altura completa del elemento. Además, no es necesario establecer ninguna css-height del elemento. Como medida de precaución, puede mantener su altura automáticamente para que se pueda representar 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 vista clara de estas funciones, puede ir al sitio de jQuery o a una publicación detallada aquí .

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

Answer 10

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

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

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

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

Y no puedo encontrar la referencia, pero creo que escuché que getComputedStyle() puede ser costoso, por lo que probablemente no sea algo a lo que quieras llamar en cada evento window.onscroll (pero tampoco la height() de jQuery height() ).

Answer 11

Simplemente debería ser

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

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

Tratando de usar

.style.height

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

Answer 12

Yo uso esto:

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

Answer 13

offsetHeight , por lo general.

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

Answer 14

NON JQUERY ya que había un montón de enlaces usando elem.style.height en la parte superior de estas respuestas ...

ALTURA INTERIOR:
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/

Answer 15

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

Answer 16

style = window.getComputedStyle(your_element);

entonces simplemente: style.height