Co to jest offsetHeight, clientHeight, scrollHeight?
Myśl o wyjaśnieniu, jaka jest różnica między offsetHeight
, clientHeight
i scrollHeight
lub offsetWidth
, clientWidth
i scrollWidth
?
Trzeba znać tę różnicę przed pracą po stronie klienta. W przeciwnym razie połowa ich życia zostanie spędzona na naprawianiu interfejsu użytkownika.
Fiddle , lub inline poniżej:
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>
2 answers
Aby poznać różnicę musisz zrozumieć model pudełkowy , ale zasadniczo:
Zwraca wewnętrzną Wysokość elementu w pikselach, włącznie z wypełnieniem, ale Nie pozioma wysokość paska przewijania , border , or margin
Jest miarą, która zawiera element granice , element pionowe wyściełanie, element horizontal scrollbar (jeśli jest obecny, jeśli jest renderowany) oraz element CSS height.
Jest miarą wysokości zawartości elementu w tym zawartości niewidocznej na ekranie z powodu przepełnienia
Ułatwię to:
Rozważmy:
<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)
wysokość całej zawartości + paddingi, pomimo wysokości element.
ClientHeight: VISIBLE content & padding
tylko widoczna wysokość: część zawartości ograniczona jawnie określoną wysokością elementu.
OffsetHeight: VISIBLE content & padding
+ border + scrollbar
wysokość zajmowana przez element w dokumencie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-26 20:25:09
* offsetHeight jest miarą w pikselach wysokości CSS elementu, w tym obramowania, wypełnienia i poziomego paska przewijania elementu.
* właściwość clientHeight zwraca możliwą do wyświetlenia Wysokość elementu w pikselach, łącznie z wypełnieniem, ale nie obramowaniem, paskiem przewijania lub marginesem.
* scrollHeight wartość jest równa minimalnej wysokości, jakiej element wymagałby, aby zmieścić całą zawartość w widoku bez korzystanie z pionowego paska przewijania. Wysokość mierzona jest w taki sam sposób jak clientHeight: zawiera wyściółkę elementu, ale nie jego obramowanie, margines lub poziomy pasek przewijania.
Tak samo jest w przypadku wszystkich z szerokością zamiast wysokości.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-04 18:22:19