¿Qué es offsetHeight, clientHeight, scrollHeight?
¿Pensaste en explicar cuál es la diferencia entre offsetHeight, clientHeightand scrollHeightor offsetWidth, clientWidthy scrollWidth?
Hay que conocer esta diferencia antes de trabajar del lado del cliente. De lo contrario, la mitad de su vida la dedicarán a arreglar la interfaz de usuario.
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 interior de un elemento en píxeles, incluido el relleno, pero no la altura , el borde o el margen de la barra de desplazamiento horizontal.
altura de compensación :
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 CSS del elemento.
altura de desplazamiento :
es una medida de la altura del contenido de un elemento, incluido el contenido que no es 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 de 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.
Lo mismo ocurre con todos estos con ancho en lugar de alto.
Mis descripciones para los tres:
- offsetHeight : cuánto del espacio de "posicionamiento relativo" del padre ocupa 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 de su barra de desplazamiento horizontal (si tiene una) del propio elemento.
- scrollHeight : cuánto espacio se necesita para ver todo el contenido/descendientes del elemento (incluidos
position: absolutelos) sin desplazarse.
Luego también está:
- getBoundingClientRect().height : Igual que scrollHeight, excepto que se calcula después de aplicar las transformaciones CSS del elemento .
Desplazamiento Significa "la cantidad o distancia en la que algo está fuera de línea". El margen o los 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 opuesto a OffsetHeight. No incluye borde ni 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 pasará por encima de su margen o borde, por eso scrollHeight no incluye márgenes ni bordes, pero sí, el relleno sí. Entonces:
- El valor de 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.