Che cos'è offsetHeight, clientHeight, scrollHeight?

Hai pensato di spiegare qual è la differenza tra offsetHeight, clientHeighte scrollHeighto offsetWidth, clientWidthe scrollWidth?

È necessario conoscere questa differenza prima di lavorare sul lato client. In caso contrario, metà della loro vita sarà spesa per correggere l'interfaccia utente.

Violino o inline sotto:

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>

Per conoscere la differenza devi capire il modello di scatola , ma fondamentalmente:

clientHeight :

restituisce l'altezza interna di un elemento in pixel, incluso il riempimento ma non l' altezza , il bordo o il margine della barra di scorrimento orizzontale

offsetHeight :

è una misura che include i bordi dell'elemento , il riempimento verticale dell'elemento, la barra di scorrimento orizzontale dell'elemento (se presente, se renderizzata) e l'altezza CSS dell'elemento.

scrollHeight :

è una misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow

Lo renderò più facile:

Tener conto di:

<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)
_{altezza di tutto il contenuto + imbottiture, nonostante l'altezza dell'elemento.}

clientHeight : VISIBLE content & padding
_{solo altezza visibile: porzione di contenuto limitata dall'altezza esplicitamente definita dell'elemento.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{altezza occupata dall'elemento sul documento.}

* offsetHeight è una misura in pixel dell'altezza CSS dell'elemento, inclusi bordo, riempimento e barra di scorrimento orizzontale dell'elemento.

* La proprietà clientHeight restituisce l'altezza visualizzabile di un elemento in pixel, incluso il riempimento, ma non il bordo, la barra di scorrimento o il margine.

* scrollHeight è uguale all'altezza minima richiesta dall'elemento per adattare tutto il contenuto nella finestra senza utilizzare una barra di scorrimento verticale. L'altezza viene misurata allo stesso modo di clientHeight: include il riempimento dell'elemento, ma non il bordo, il margine o la barra di scorrimento orizzontale.

Lo stesso vale per tutti questi con larghezza anziché altezza.

Le mie descrizioni per i tre:

• offsetHeight : quanto spazio del "posizionamento relativo" del genitore viene occupato dall'elemento. (cioè ignora i position: absolutediscendenti dell'elemento )
• clientHeight : uguale a offset-height, tranne per il fatto che esclude il bordo, il margine e l'altezza dell'elemento della sua barra di scorrimento orizzontale (se ne ha uno).
• scrollHeight : quanto spazio è necessario per visualizzare tutto il contenuto / i discendenti dell'elemento (inclusi position: absolutequelli) senza scorrere.

Poi c'è anche:

• getBoundingClientRect (). height : uguale a scrollHeight, tranne per il fatto che viene calcolato dopo l'applicazione delle trasformazioni css dell'elemento .

Offset Indica "la quantità o la distanza in base alla quale qualcosa è fuori linea". Margine o bordi sono qualcosa che rende l'altezza o la larghezza effettiva di un elemento HTML "fuori linea". Ti aiuterà a ricordare che:

• offsetHeight è una misura in pixel dell'altezza CSS dell'elemento, inclusi bordo, riempimento e la barra di scorrimento orizzontale dell'elemento.

D'altra parte, clientHeight è qualcosa che puoi dire in un certo senso l'opposto di OffsetHeight. Non include il bordo o i margini. Include il riempimento perché è qualcosa che risiede all'interno del contenitore HTML, quindi non conta come misure extra come margine o bordo. Così :

• La proprietà clientHeight restituisce l'altezza visualizzabile di un elemento in pixel, incluso il riempimento, ma non il bordo, la barra di scorrimento o il margine.

ScrollHeight è tutta l'area scorrevole, quindi il tuo scorrimento non passerà mai oltre il tuo margine o bordo, quindi è per questo che scrollHeight non include margine o bordi ma sì, lo fa il riempimento. Così:

• Il valore scrollHeight è uguale all'altezza minima richiesta dall'elemento per adattare tutto il contenuto nella finestra senza utilizzare una barra di scorrimento verticale. L'altezza viene misurata allo stesso modo di clientHeight: include il riempimento dell'elemento, ma non il bordo, il margine o la barra di scorrimento orizzontale.