¿Qué es offsetHeight, clientHeight, scrollHeight?

¿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>

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.}

* 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.

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á:

• getBoundingClientRect (). height : igual que scrollHeight, excepto que se calcula después de que se aplican las transformaciones css del elemento .

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.