diferencia entre offsetHeight y clientHeight

154

En el dominio de JavaScript: ¿cuál es la diferencia entre offsetHeight y clientHeight de un elemento?

javascript

— Steve
fuente

Aquí un buen ejemplo de demostración jsfiddle.net/shibualexis/yVhgM/3

— GibboK

Respuestas:

203

altura del cliente :

Devuelve la altura del área visible para un objeto, en píxeles. El valor contiene la altura con el relleno, pero no incluye la barra de desplazamiento, el borde y el margen.

offsetHeight :

Devuelve la altura del área visible para un objeto, en píxeles. El valor contiene la altura con el relleno, barra de desplazamiento y el borde, pero no incluye el margen.

Entonces, offsetHeightincluye barra de desplazamiento y borde, clientHeightno.

— Oded
fuente

Otra cosa que noté es que clientHeight es mucho más rápido que offsetHeight. ¿Tienes alguna idea de por qué?

— disc0dancer

@ disc0dancer - Probablemente porque el navegador ya tiene clientSizedisponible (después de todo, es la ventana offsetHeightgráfica ), pero ¿necesita calcularlo después de volver a fluir todo el documento?

— Oded

Bueno, el inspector de webkit dice que los reflujos también están en todo el documento, incluso cuando se solicita clientHeigh.

— disc0dancer

@ disc0dancer - Demasiado para mi conjetura. Pero esto es una cuestión de implementación: no estoy seguro de que todos los navegadores sean así.

— Oded

La respuesta de Oded es la teoría. Pero la teoría y la realidad no siempre son las mismas, al menos no para los elementos <BODY> o <HTML> que pueden ser importantes para las operaciones de desplazamiento en javascript.

Microsoft tiene una buena imagen en el MSDN :

ClientHeight, OffsetHeight, ScrollHeight

Si tiene una página HTML que muestra una barra de desplazamiento vertical, uno esperaría que el elemento <BODY> o <HTML> tenga un geater ScrollHeight que OffsetHeight como muestra esta imagen. Esto es cierto para todas las versiones anteriores de Internet Explorer.

Pero no es cierto para Internet Explorer 11 y no para Firefox 36. Al menos en estos navegadores, OffsetHeight es casi lo mismo que ScrollHeight, lo cual es incorrecto.

Y aunque OffsetHeight puede estar equivocado, ClientHeight siempre es correcto.

Pruebe el siguiente código en diferentes navegadores y verá:

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

Mientras que Internet Explorer anterior se muestra correctamente:

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

El resultado de Firefox e Internet Explorer 11 es:

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

lo que muestra claramente que offsetHeight está mal aquí. OffsetHeight y ClientHeight deberían diferir solo unos pocos píxeles o ser iguales.

Tenga en cuenta que ClientHeight y OffsetHeight también pueden diferir extremadamente para elementos que no son visibles como, por ejemplo, un <FORM> donde OffsetHeight puede ser el tamaño real del FORMULARIO mientras que ClientHeight puede ser cero.

— Elmue
fuente