¿Qué es offsetHeight, clientHeight, scrollHeight?


235

¿Pensó en explicar cuál es la diferencia entre offsetHeight, clientHeighty scrollHeighto offsetWidth, clientWidthy scrollWidth?

Uno debe saber esta diferencia antes de trabajar en el lado del cliente. De lo contrario, la mitad de su vida se gastará en reparar la IU.

Fiddle , o en línea a continuación:

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
  div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
  div.style.height = mainDiv[propTypeHeight] + "px";
  div.style.lineHeight = mainDiv[propTypeHeight] + "px";
  div.style.width = mainDiv[propTypeWidth] + "px";
  div.style.textAlign = "center";
  div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
    mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";



  div.style.background = "rgba(0,0,255,0.5)";
  document.body.appendChild(div);

}
document.getElementById("offset").onclick = function() {
  whatis('offset');
}
document.getElementById("client").onclick = function() {
  whatis('client');
}
document.getElementById("scroll").onclick = function() {
  whatis('scroll');
}
#MainDIV {
  border: 5px solid red;
}
<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>

<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
  <div style="height:400px; width:500px; overflow:hidden;">

  </div>
</div>


66
Esta pregunta parece estar fuera de tema porque simplemente proporciona una sugerencia. La única pregunta está en el título de 'pregunta'.
enhzflep

Respuestas:


544

Para saber la diferencia hay que entender el modelo de caja , pero básicamente:

altura del cliente :

devuelve la altura interna de un elemento en píxeles, incluido el relleno pero no la altura , borde o margen de la barra de desplazamiento horizontal

offsetHeight :

es una medida que incluye los bordes del elemento , el relleno vertical del elemento, la barra de desplazamiento horizontal del elemento (si está presente, si se representa) y la altura del elemento CSS.

scrollHeight :

es una medida de la altura del contenido de un elemento, incluido el contenido no visible en la pantalla debido al desbordamiento


Lo haré más fácil:

Considerar:

<element>                                     
    <!-- *content*: child nodes: -->        | content
    A child node as text node               | of
    <div id="another_child_node"></div>     | the
    ... and I am the 4th child node         | element
</element>                                    

scrollHeight : ENTIRE content & padding (visible or not)
Altura de todo el contenido + rellenos, a pesar de la altura del elemento.

clientHeight : VISIBLE content & padding
solo altura visible: porción de contenido limitada por la altura explícitamente definida del elemento.

offsetHeight : VISIBLE content & padding + border + scrollbar
Altura ocupada por el elemento en el documento.

scrollHeight clientHeight y offsetHeight


y si solo quieres altura visible
Muhammad Umer

2
La clientHeightaltura es visible
Andre Figueiredo

99
Es por eso que amo SO, ¡gracias por el esfuerzo de hacerlo tan claro!
Herick

2
Nota: offsetHeight puede devolver nulo si el elemento tiene posición: fijo. SVG offsetHeight está en desuso en Chrome. offsetHeight volverá a cero si el elemento es display: none, o tiene un antepasado con display: none
Drenai

3
my scrollHeighty clientHeightambos están apareciendo igual a pesar de que la pantalla tiene más contenido y una barra de desplazamiento. ¿Por qué?
blankface

5

* offsetHeight es una medida en píxeles de la altura CSS del elemento, incluido el borde, el relleno y la barra de desplazamiento horizontal del elemento.

* La propiedad clientHeight devuelve la altura visible de un elemento en píxeles, incluido el relleno, pero no el borde, la barra de desplazamiento o el margen.

* El valor scrollHeight es igual a la altura mínima que requeriría el elemento para ajustar todo el contenido en la ventana gráfica sin usar una barra de desplazamiento vertical. La altura se mide de la misma manera que clientHeight: incluye el relleno del elemento, pero no su borde, margen o barra de desplazamiento horizontal.

Igual es el caso de todos estos con ancho en lugar de altura.


2

Mis descripciones para los tres:

  • offsetHeight : cuánto del espacio de "posicionamiento relativo" del padre es ocupado por el elemento. (es decir, ignora los position: absolutedescendientes del elemento )
  • clientHeight : igual que offset-height, excepto que excluye el borde, el margen y la altura del elemento de su barra de desplazamiento horizontal (si tiene uno).
  • scrollHeight : cuánto espacio se necesita para ver todo el contenido / descendientes del elemento (incluidos los que position: absoluteestán) sin desplazarse.

Luego también está:


La nota sobre las transformaciones CSS es bastante importante en este caso.
Jan Bradáč

0

Offset significa "la cantidad o distancia por la cual algo está fuera de línea". Margen o bordes son algo que hace que la altura o el ancho real de un elemento HTML estén "fuera de línea". Te ayudará a recordar que:

  • offsetHeight es una medida en píxeles de la altura CSS del elemento, incluido el borde, el relleno y la barra de desplazamiento horizontal del elemento.

Por otro lado, clientHeight es algo que se puede decir más o menos lo contrario de OffsetHeight. No incluye el borde o los márgenes. Incluye el relleno porque es algo que reside dentro del contenedor HTML, por lo que no cuenta como medidas adicionales como margen o borde. Entonces :

  • La propiedad clientHeight devuelve la altura visible de un elemento en píxeles, incluido el relleno, pero no el borde, la barra de desplazamiento o el margen.

ScrollHeight es toda el área desplazable, por lo que su desplazamiento nunca se ejecutará sobre su margen o borde, por eso scrollHeight no incluye margen o bordes, pero sí el relleno. Entonces:

  • El valor scrollHeight es igual a la altura mínima que requeriría el elemento para ajustar todo el contenido en la ventana gráfica sin usar una barra de desplazamiento vertical. La altura se mide de la misma manera que clientHeight: incluye el relleno del elemento, pero no su borde, margen o barra de desplazamiento horizontal.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.