diferencia entre offsetHeight y clientHeight

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

Fuente

2010-11-05 steve

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

137

clientHeight:

devuelve la altura de la parte visible de 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 de la parte visible de 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.

Por lo tanto, offsetHeight incluye la barra de desplazamiento y el borde, clientHeight no lo hace.

Fuente

2010-11-05 14:05:14 Oded

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

@ disc0dancer - Probablemente porque el navegador ya tiene el 'clientSize' disponible (después de todo, lo es la ventana gráfica), pero necesita calcular' offsetHeight' después de refinar todo el documento? – Oded

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

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 imagen agradable en el MSDN:

ClientHeight, OffsetHeight, ScrollHeight

Si usted tiene una página HTML que muestra una barra de desplazamiento vertical que cabría esperar que o bien el <CUERPO> o el elemento <HTML> tiene una ScrollHeight geater than 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 que es incorrecto.

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

Prueba 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 más viejo Internet Explorer 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 para los elementos que no son visibles como por ejemplo un FORMA < > donde offsetHeight puede ser el tamaño real del modelo Aunque clientHeight puede ser cero.

Fuente

2015-07-15 20:03:30 Elmue

diferencia entre offsetHeight y clientHeight

Respuesta

Cuestiones relacionadas