Was ist offsetHeight, clientHeight, scrollHeight?

235

Dachte , zu erklären , was ist der Unterschied zwischen offsetHeight, clientHeightund scrollHeightoder offsetWidth, clientWidthund scrollWidth?

Diesen Unterschied muss man kennen, bevor man auf der Client-Seite arbeitet. Andernfalls wird die Hälfte ihres Lebens für die Reparatur der Benutzeroberfläche aufgewendet.

Geige oder Inline unten:

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>

Shibualexis
quelle
6
Diese Frage scheint nicht zum Thema zu gehören, da sie lediglich einen Tipp liefert. Die einzige Frage ist im Titel "Frage".
Enhzflep

Antworten:

542

Um den Unterschied zu erkennen, muss man das Box-Modell verstehen , aber im Grunde:

clientHeight :

Gibt die innere Höhe eines Elements in Pixel zurück, einschließlich Auffüllen, jedoch nicht die horizontale Höhe , den Rand oder den Rand der Bildlaufleiste

offsetHeight :

ist eine Messung , die umfasst die Elementgrenzen , um das Element vertikal Polsterung, das Element horizontal scrollbar (falls vorhanden, wenn wiedergegeben) und das Element CSS Höhe.

scrollHeight :

ist ein Maß für die Höhe des Inhalts eines Elements, einschließlich des Inhalts, der aufgrund eines Überlaufs nicht auf dem Bildschirm angezeigt wird


Ich werde es einfacher machen:

Erwägen:

<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)
Höhe aller Inhalte + Auffüllungen, trotz der Höhe des Elements.

clientHeight : VISIBLE content & padding
Nur sichtbare Höhe: Inhaltsteil, der durch die explizit definierte Höhe des Elements begrenzt ist.

offsetHeight : Höhe, die das Element im Dokument einnimmt VISIBLE content & padding + border + scrollbar
.

scrollHeight clientHeight und offsetHeight

Andre Figueiredo
quelle
und wenn Sie nur sichtbare Höhe wollen
Muhammad Umer
2
Das clientHeightist die sichtbare Höhe
Andre Figueiredo
9
Deshalb liebe ich SO, danke für die Mühe, es so klar zu machen!
Herick
2
Hinweis: offsetHeight kann null zurückgeben, wenn das Element die Position fest hat. SVG offsetHeight wird in Chrome nicht mehr unterstützt. offsetHeight wird null erneut ausführen, wenn das Element angezeigt wird: none oder einen Vorfahren mit display: none
Drenai
3
Meine scrollHeightund clientHeightbeide werden gleich angezeigt, obwohl der Bildschirm mehr Inhalt und eine Bildlaufleiste enthält. Warum?
blankface
5

* offsetHeight ist eine Messung der CSS-Höhe des Elements in Pixel, einschließlich Rand, Abstand und horizontaler Bildlaufleiste des Elements.

* Die clientHeight- Eigenschaft gibt die sichtbare Höhe eines Elements in Pixel zurück, einschließlich Auffüllen, jedoch nicht den Rand, die Bildlaufleiste oder den Rand.

* scrollHeight- Wert entspricht der Mindesthöhe, die das Element benötigen würde, um den gesamten Inhalt im Ansichtsfenster ohne Verwendung einer vertikalen Bildlaufleiste anzupassen. Die Höhe wird auf die gleiche Weise wie clientHeight gemessen: Sie enthält die Auffüllung des Elements, jedoch nicht dessen Rand, Rand oder horizontale Bildlaufleiste.

Gleiches gilt für alle mit Breite statt Höhe.

Steev James
quelle
2

Meine Beschreibungen für die drei:

  • offsetHeight : Wie viel Platz für die "relative Positionierung" des übergeordneten Elements wird vom Element belegt. (dh es ignoriert die position: absoluteNachkommen des Elements )
  • clientHeight : Entspricht der Versatzhöhe , außer dass der Rand, der Rand und die Höhe der horizontalen Bildlaufleiste des Elements (falls vorhanden) ausgeschlossen sind.
  • scrollHeight : Wie viel Speicherplatz wird benötigt, um den gesamten Inhalt / die Nachkommen des Elements (einschließlich position: absolutederjenigen) ohne Bildlauf anzuzeigen .

Dann gibt es noch:

Venryx
quelle
Der Hinweis zu CSS-Transformationen ist in diesem Fall sehr wichtig.
Jan Bradáč
0

Versatz bedeutet "die Menge oder Entfernung, um die etwas außerhalb der Linie liegt". Rand oder Rahmen sind etwas, das die tatsächliche Höhe oder Breite eines HTML-Elements "aus der Linie" bringt. Es wird Ihnen helfen, sich daran zu erinnern:

  • offsetHeight ist eine Messung der CSS-Höhe des Elements in Pixel, einschließlich Rand, Abstand und horizontaler Bildlaufleiste des Elements.

Auf der anderen Seite ist clientHeight etwas, was man als das Gegenteil von OffsetHeight bezeichnen kann. Der Rand oder die Ränder sind nicht enthalten. Das Auffüllen ist enthalten, da es sich im HTML-Container befindet und daher nicht als zusätzliche Maße wie Rand oder Rand gilt. So :

  • Die Eigenschaft clientHeight gibt die sichtbare Höhe eines Elements in Pixel zurück, einschließlich Auffüllen, jedoch nicht den Rand, die Bildlaufleiste oder den Rand.

ScrollHeight ist der gesamte scrollbare Bereich, sodass Ihr Bildlauf niemals über Ihren Rand oder Rand läuft. Deshalb enthält scrollHeight keinen Rand oder Rand, aber das Auffüllen. So:

  • Der Wert von scrollHeight entspricht der Mindesthöhe, die das Element benötigen würde, um den gesamten Inhalt im Ansichtsfenster ohne Verwendung einer vertikalen Bildlaufleiste anzupassen. Die Höhe wird auf die gleiche Weise wie clientHeight gemessen: Sie enthält die Auffüllung des Elements, jedoch nicht dessen Rand, Rand oder horizontale Bildlaufleiste.
Sagar Bajpai
quelle