javascript - clientheight - scrollheight jquery

¿Qué es offsetHeight, clientHeight, scrollHeight?

Question

¿Pensó en explicar cuál es la diferencia entre offsetHeight , clientHeight y scrollHeight o offsetWidth , clientWidth y 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 arreglar la UI.

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>

Answer 1

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

clientHeight :

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 elemento relleno vertical, el elemento barra de desplazamiento horizontal (si está presente, si se representa) y el elemento altura 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) completo ENTIRE content & padding (visible or not)
_{Altura de todo el contenido + paddings, a pesar de la altura del elemento.}

clienteAltura : VISIBLE content & padding
_{Solo altura visible: porción de contenido limitada por la altura explícitamente definida del elemento.}

offsetAltura : VISIBLE content & padding + border + scrollbar
_{Altura ocupada por el elemento en el documento.}