jquery - obtener - outerheight javascript

outerHeight(verdadero) da valor incorrecto

Question

Quiero la altura de un elemento contenedor, incluidos los márgenes y los rellenos.

Cuando paso el cursor sobre el elemento en la herramienta de desarrollo Chrome, obtengo el valor que estoy buscando pero cuando uso jQuery $(''element'').outerHeight(true) ; Tengo un valor mucho menor.

El elemento contiene un carrusel jQuery (en un contenedor con position:relative y position: absolute artículos position: absolute ), ¿podría tener algo que ver con eso?

Gracias por adelantado

Answer 1

Creo que podrías necesitar

.outerHeight({margin: true});

Según here :

El margen se puede incluir al pasar un mapa de opciones con el margen establecido en verdadero.

Answer 2

He experimentado este problema varias veces, y la mejor solución, sin el uso de ningún complemento o función de setTimeout ingobernable, es usar el gancho en el evento onLoad del navegador. Con jQuery, se hace así:

$(window).load(function(){ ...outerHeight logic goes here... });

Esto podría estar totalmente separado de su $(function(){ ...code... }); estándar $(function(){ ...code... }); por lo tanto, todos los demás códigos que funcionan correctamente no tienen que esperar hasta que todos los elementos de la página se hayan cargado.

Por qué esto sucede en primer lugar:
Chrome tiene un algoritmo de representación diferente al de Firefox, lo que hace que active el evento onLoad antes de que todos los elementos de la página se dibujen / muestren por completo y estén disponibles para que jQuery seleccione y recupere alturas. setTimeout() funcionará la mayor parte del tiempo, pero no desea desarrollar una dependencia de algo tan ciego por naturaleza; quién sabe, en el futuro, esta "peculiaridad" en Chrome podría solucionarse. :)

Answer 3

Los elementos ocultos, fijos y absolutos interiores no se contabilizan correctamente utilizando la Altura externa.

Pruebe la propiedad scrollHeight:

$(''element'').prop(''scrollHeight'')

Answer 4

Me he encontrado con el mismo problema.

Firefox outerheight a través de console.log: 430 Chrome outerheight a través de console.log: 477

Altura exterior real (diseño de firebug): 820

Después de abrir Firebug o eliminar la barra de estado, establece el valor correcto (820) en console.log (y, por lo tanto, el código funciona como debería).

El problema se debió a las imágenes. Aunque lo está ejecutando en un documento listo, no todas las imágenes pueden estar cargadas todavía, y por lo tanto los cálculos son incorrectos.

Estoy usando el plugin de desandro y ha solucionado mi problema. https://github.com/desandro/imagesloaded

Answer 5

Probé cada una de estas soluciones. Finalmente abrí el inspector y me di cuenta de que mi p aún tenía un margin-top . Como siempre gracias Normalizar ...

Answer 6

Si la ventana está cargada y el documento está listo y usted ha tenido en cuenta los flotantes y todavía tiene este problema, entonces considere buscar un elemento con la misma ID. Asegúrese de obtener el elemento correcto con su selector de jQuery. Olvidé que tenía otro elemento en el dominio con la misma identificación. Considere usar jQuery para cambiar el color de fondo para verificar.

Answer 7

Un pequeño truco. Coloque el código dentro de jquery''s on load, scroll y redimensione funciones como esta:

$(window).on(''load scroll resize'', function(){
    //outerHeight code
});

Answer 8

Yo tuve el mismo problema. Obtengo la altura correcta en Chrome utilizando setTimeout para esperar un poco:

    setTimeout ( function () {
        var ht = $(''.my-class'').outerHeight( true );
    }, 1);

¡Espero que eso ayude!

Answer 9

el que funcionó exactamente como debería para mí fue una combinación de respuestas de @Matt Reilly y @Lasha

$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});

solía poner el código en $(document).ready(function(){...}); pero a veces se vuelve más áspero, así que lo anterior funciona perfectamente.

Answer 10

Según los documentos , outerHeight no está garantizado para ser preciso cuando:

• la página está ampliada
• El elemento o su padre está oculto.