Was ist offsetHeight, clientHeight, scrollHeight?

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>

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
_.

* 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.

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:

• getBoundingClientRect (). height : Wie scrollHeight, außer dass es berechnet wird, nachdem die CSS-Transformationen des Elements angewendet wurden .

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.