javascript - clientheight - scrollheight jquery
¿Qué es offsetHeight, clientHeight, scrollHeight? (1)
¿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>
Para saber la diferencia, debes entender el modelo de caja , pero básicamente:
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
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.
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.