javascript - migos - offsettop

diferencia entre offsetHeight y clientHeight (2)

La respuesta de Oded es la teoría. Pero la teoría y la realidad no son siempre 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 bonita imagen en MSDN:

Si tiene una página HTML que muestra una barra de desplazamiento vertical, cabría esperar que el elemento <BODY> o <HTML> tenga un generador ScrollHeight que OffsetHeight como se muestra en 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, que 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> <script> document.write("Body off: " + document.body.offsetHeight + " Body cli: " + document.body.clientHeight + " Html off: " + document.body.parentElement.offsetHeight + " Html cli: " + document.body.parentElement.clientHeight); </script> </body> </html>

Mientras más viejo Internet Explorer se muestra correctamente:

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

La salida de Firefox e Internet Explorer 11 es:

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

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

Tenga en cuenta que ClientHeight y OffsetHeight también pueden diferir extremadamente en el caso de 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.

En javascript dom: ¿cuál es la diferencia entre offsetHeight y clientHeight de un elemento?

clientHeight :

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, la barra de desplazamiento y el borde, pero no incluye el margen.

Entonces, offsetHeight incluye scrollbar y border, clientHeight no.