wake-up-neo.com

Was ist offsetHeight, clientHeight, scrollHeight?

Denken Sie zu erklären, was ist der Unterschied zwischen offsetHeight, clientHeight und scrollHeight oder offsetWidth, clientWidth und scrollWidth?

Man muss diesen Unterschied kennen, bevor man auf Kundenseite arbeitet. Andernfalls wird die Hälfte ihres Lebens für die Korrektur der Benutzeroberfläche aufgewendet.

Fiddle 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>

178
shibualexis

Um den Unterschied zu kennen, muss man das box model verstehen, aber im Grunde:

clientHeight :

gibt die innere Höhe eines Elements in Pixeln zurück, einschließlich der Auffüllung, aber nicht der horizontalen Bildlaufleistenhöhe, border oder margin.

offsetHeight :

ist eine Messung, die umfasst das Element border, die vertikale Auffüllung des Elements, das Element horizontal scrollbar (falls vorhanden, falls gerendert) und die CSS-Höhe des Elements.

scrollHeight :

ist ein Maß für die Höhe des Elementinhalts einschließlich Inhalt nicht sichtbar auf dem Bildschirm wegen Überlauf


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 + Füllungen trotz Elementhöhe.

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

offsetHeight: VISIBLE content & padding+ border + scrollbar
Von dem Element im Dokument belegte Höhe.

scrollHeightclientHeight and offsetHeight

435

* offsetHeight ist eine Messung in Pixeln der CSS-Höhe des Elements, einschließlich des Rahmens, der Auffüllung und der horizontalen Bildlaufleiste des Elements.

* clientHeight property gibt die sichtbare Höhe eines Elements in Pixeln zurück, einschließlich Auffüllung, aber nicht den Rand, die Bildlaufleiste oder den Rand.

* scrollHeight value entspricht der Mindesthöhe von , die das Element benötigen würde, um den gesamten Inhalt des Ansichtsfensters anzupassen, ohne eine vertikale Bildlaufleiste zu verwenden. Die Höhe wird auf dieselbe Weise wie clientHeight gemessen: Sie schließt die Auffüllung des Elements ein, nicht jedoch den Rand, den Rand oder die horizontale Bildlaufleiste.

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

0
Steev James