Obtener la altura completa de un DIV recortado

¿Cómo obtengo el alto del div que incluye el área recortada del div?Obtener la altura completa de un DIV recortado

<div style="height: 20px; overflow: hidden"> 
    content<br>content<br>content<br> 
    content<br>content<br>content<br> 
    content<br>content<br>content<br> 
</div>

Fuente

2011-01-06 Prakash Raman

para cualquiera que busque el mejor enfoque omita la respuesta aceptada y pruebe la respuesta @Colt. –

Excepto que la respuesta usa jQuery, y esta pregunta no preguntó nada sobre jQuery. – L0j1k

Creo que el punto estaba en el uso de 'scrollHeight' ... no en el * jQuery * – Giraldi

Bueno, no puede hacerlo de esa manera, pero es posible cuando se añade un elemento interior de su contenedor, así:

<div id="element" style="height: 20px; overflow: hidden;"> 
    <p id="innerElement"> <!-- notice this inner element --> 
     content<br />content<br />content<br /> 
     content<br />content<br />content<br /> 
     content<br />content<br />content<br /> 
    </p> 
</div>

sidenote: contenido de envoltura interior de los párrafos es una buena práctica también, además de que un elemento extra no está dando que gran parte de los problemas, o ninguna en absoluto ...

y JavaScript:

var innerHeight = document.getElementById('innerElement').offsetHeight; 
alert(innerHeight);

P.S. Para que este JavaScript funcione, colóquelo después de su div #element, porque JavaScript plano se ejecuta antes de que DOM esté listo si no se le indica que lo haga. Para que esto funcione cuando DOM esté listo, check this.

Pero sugiero que obtenga jQuery, será útil más adelante si va a extender las operaciones de JavaScript en su sitio.

Además, jQuery es el poder, de verdad!

De esta manera, sólo tiene que añadir este script a su <head /> (suponiendo que ha incluido jQuery):

$(document).ready(function() { 
var innerHeight = $('#innerElement').height(); 
alert(innerHeight); 
});

Example @jsFiddle using jQuery way!

Fuente

2011-01-06 08:57:37 jolt

Sí. Parece que esta es la mejor manera de hacerlo. Gracias. Ah, sí, me encanta jQuery. Preciosa biblioteca. –

Consejo: (Esto me acaba de atrapar) si sigues obteniendo 0 devuelto por la altura o el offsetHeight, asegúrate de haber configurado tus elementos para que estén visibles antes de hacer la medición. –

Esta es una gran manera de hacer esto. ¡Gracias! – Rook777

Eso no es posible que yo sepa. Lo que podría intentar es eliminar ese estilo y configurarlo usando javascript después de obtener la altura. No es la solución más elegante, pero creo que es la única.

Fuente

2011-01-06 08:37:07 Fabian

Le di carne y huesos a esa idea, IMO es lo suficientemente elegante cuando se envuelve muy bien en una función. :) –

Aquí es una manera de lograr lo que necesita, utilizando idea Fabian:

function GetHeight() { 
    var oDiv = document.getElementById("MyDiv"); 
    var sOriginalOverflow = oDiv.style.overflow; 
    var sOriginalHeight = oDiv.style.height; 
    oDiv.style.overflow = ""; 
    oDiv.style.height = ""; 
    var height = oDiv.offsetHeight; 
    oDiv.style.height = sOriginalHeight; 
    oDiv.style.overflow = sOriginalOverflow; 
    alert("Real height is " + height); 
}

demo y de casos de prueba en vivo: http://jsfiddle.net/yahavbr/7Lbz9/

Fuente

2011-01-06 09:05:40

Sí, esto sería suficiente. Aunque esperaba que no necesitaría eliminar el desbordamiento antes de calcular la altura. –

En realidad, esto sucede para resolver mi problema perfectamente, ya que la velocidad a la que se configura/restablece el desbordamiento no pone en un desplazamiento –

@Prakash ya que solo estoy configurando una variable y luego restablezco el desbordamiento original y la altura, ya está dentro de un "tick" de la CPU para que el usuario no vea ningún cambio en la IU. –

Esto funciona en todos los casos, ya sea que tenga un nodo de texto dentro o un contenedor. Esto está usando jquery, pero no es necesario.

 
//return the total height. 
totalHeight = $('#elem')[0].scrollHeight; 
//return the clipped height. 
visibleHeight = $('#elem').height();

$ ('# elem') [0] está devolviendo el elemento dom de la llamada jquery. para que pueda usar eso en cualquier elemento dom usando plain ol 'javascript.

Fuente

2011-04-11 20:39:33 Colt

Obtener la altura completa de un DIV recortado

Respuesta

Cuestiones relacionadas