Wat is offsetHeight, clientHeight, scrollHeight?

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>

Antwoord 1, autoriteit 100%

Om het verschil te kennen, moet u het boxmodel, maar eigenlijk:

clientHeight:

retourneert de binnenste hoogte van een element in pixels, inclusief opvulling maar nietde horizontale schuifbalkhoogte, randof marge

offsetHeight:

is een meting die bevathet element randen, het element verticale opvulling, het element horizontale schuifbalk(indien aanwezig, indien weergegeven) en het element CSS hoogte.

scrollHeight:

is een meting van de hoogte van de inhoud van een element inclusiefinhoud niet zichtbaarop het scherm vanwege overloop

Ik zal het gemakkelijker maken:

Overweeg:

<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)
_{Hoogte van alle inhoud + opvulling, ondanks de hoogte van het element.}

clientHeight: VISIBLE content & padding
_{Alleen zichtbare hoogte: inhoudsgedeelte beperkt door expliciet gedefinieerde hoogte van het element.}

offsetHeight: VISIBLE content & padding+ border + scrollbar
_{Hoogte ingenomen door het element op document.}

Antwoord 2

* Offsethight is een meting in pixels van de CSS-hoogte van het element, inclusief rand, opvulling en de horizontale schuifbalk van het element.

* ClientHeight Property Retourneert de aanzichtbare hoogte van een element in pixels, inclusief opvulling, maar niet de grens, schuifbalk of marge.

* Scrollheight Waarde is gelijk aan de Minimumhoogte Minimumhoogte Het element zou vereisen om alle inhoud in de viewport te passen zonder een verticale schuifbalk te gebruiken. De hoogte wordt op dezelfde manier gemeten als clientheight: het omvat de opvulling van het element, maar niet de grens, marge of horizontale schuifbalk.

Hetzelfde is het geval voor al deze met de breedte in plaats van hoogte.

Antwoord 3

Mijn beschrijvingen voor de drie:

• Offsetheight : Hoeveel van de “relatieve positionering” -ruimte van de ouder wordt door het element opgenomen. (dwz. Het negeert het element position: absoluteafstammelingen)
• ClientHeight : hetzelfde als offsethoogte, behalve dat het de eigen rand van het element, de marge en de hoogte van zijn horizontale schuifbalk uitsluit (als het er één heeft).
• Scrollheight : Hoeveel ruimte is nodig om alle inhoud / afstemmingen / afstemmingen van het element te zien (inclusief position: absoluteones) zonder te scrollen.

Dan is er ook:

• GetboundingClientRect (). Hoogte : hetzelfde als scrollheight, behalve dat het wordt berekend Nadat de CSS-transformaties van het element zijn toegepast .

Antwoord 4

Offset betekent “het bedrag of de afstand waardoor iets niet in overeenstemming is”. Marge of grenzen zijn iets dat de werkelijke lengte of breedte van een HTML-element “out of line” maakt. Het helpt je om te onthouden dat:

• offsetHeightis een meting in pixels van de CSS van het element
  hoogte, inclusief rand, opvulling en horizontaal van het element
  schuifbalk.

Aan de andere kant is clientHeight iets dat je het tegenovergestelde van OffsetHeight kunt zeggen. Het omvat niet de rand of marges. Het bevat de opvulling omdat het iets is dat zich in de HTML-container bevindt, dus het telt niet als extra metingen zoals marge of rand. Dus :

• clientHeighteigenschap retourneert de zichtbare hoogte van een element in
  pixels, inclusief opvulling, maar niet de rand, schuifbalk of marge.

ScrollHeight is het hele gebied waar u kunt scrollen, dus uw scroll loopt nooit over uw marge of rand, daarom bevat scrollHeight geen marge of randen, maar opvulling wel. Dus:

• scrollHeightwaarde is gelijk aan de minimale hoogte die het element nodig heeft om alle inhoud in de viewport te laten passen zonder gebruik te maken van
  een verticale schuifbalk. De hoogte wordt op dezelfde manier gemeten als:
  clientHeight: het bevat de opvulling van het element, maar niet de rand,
  marge of horizontale schuifbalk.