Qu'est-ce que offsetHeight, clientHeight, scrollHeight?

Pensé à expliquer quelle est la différence entre offsetHeight, clientHeightet scrollHeightou offsetWidth, clientWidthet scrollWidth?

Il faut connaître cette différence avant de travailler côté client. Sinon, la moitié de leur vie sera consacrée à la réparation de l'interface utilisateur.

Violon , ou en ligne ci-dessous:

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>

Pour connaître la différence, vous devez comprendre le modèle de boîte , mais en gros:

clientHeight :

renvoie la hauteur intérieure d'un élément en pixels, y compris le remplissage, mais pas la hauteur , la bordure ou la marge de la barre de défilement horizontale

offsetHeight :

est une mesure qui inclut les bordures de l'élément, le remplissage vertical de l'élément, la barre de défilement horizontale de l'élément (si elle est présente, si elle est rendue) et la hauteur CSS de l'élément.

scrollHeight :

est une mesure de la hauteur du contenu d'un élément, y compris le contenu non visible à l'écran en raison d'un débordement

Je vais vous faciliter la tâche:

Considérer:

<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)
_{Hauteur de tout le contenu + rembourrages, malgré la hauteur de l'élément.}

clientHeight : VISIBLE content & padding
_{Seulement hauteur visible: portion de contenu limitée par la hauteur explicitement définie de l'élément.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{Hauteur occupée par l'élément sur le document.}

* offsetHeight est une mesure en pixels de la hauteur CSS de l'élément, y compris la bordure, le rembourrage et la barre de défilement horizontale de l'élément.

* La propriété clientHeight renvoie la hauteur visible d'un élément en pixels, y compris le remplissage, mais pas la bordure, la barre de défilement ou la marge.

* La valeur scrollHeight est égale à la hauteur minimale dont l'élément aurait besoin pour s'adapter à tout le contenu de la fenêtre sans utiliser une barre de défilement verticale. La hauteur est mesurée de la même manière que clientHeight: elle inclut le remplissage de l'élément, mais pas sa bordure, sa marge ou sa barre de défilement horizontale.

Il en va de même pour tous ces éléments avec largeur au lieu de hauteur.

Mes descriptions pour les trois:

• offsetHeight : La quantité d'espace de "positionnement relatif" du parent est occupée par l'élément. (c'est-à-dire qu'il ignore les position: absolutedescendants de l'élément )
• clientHeight : identique à offset-height, sauf qu'il exclut la bordure, la marge et la hauteur de la barre de défilement horizontale de l'élément (si elle en a une).
• scrollHeight : combien d'espace est nécessaire pour voir tout le contenu / les descendants de l'élément (y compris position: absoluteceux) sans défilement.

Ensuite, il y a aussi:

• getBoundingClientRect (). height : identique à scrollHeight, sauf qu'il est calculé après l'application des transformations CSS de l'élément .

Décalage signifie "la quantité ou la distance par laquelle quelque chose est hors ligne". La marge ou les bordures sont quelque chose qui rend la hauteur ou la largeur réelle d'un élément HTML "hors ligne". Cela vous aidera à vous rappeler que:

• offsetHeight est une mesure en pixels de la hauteur CSS de l'élément, y compris la bordure, le remplissage et la barre de défilement horizontale de l'élément.

D'un autre côté, clientHeight est quelque chose que vous pouvez dire un peu à l'opposé de OffsetHeight. Il n'inclut pas la bordure ou les marges. Il inclut le remplissage, car il se trouve à l'intérieur du conteneur HTML, il ne compte donc pas comme des mesures supplémentaires comme la marge ou la bordure. Alors :

• La propriété clientHeight renvoie la hauteur visible d'un élément en pixels, y compris le remplissage, mais pas la bordure, la barre de défilement ou la marge.

ScrollHeight est toute la zone de défilement, donc votre défilement ne se déroulera jamais sur votre marge ou bordure, c'est pourquoi scrollHeight n'inclut pas de marge ou de bordure, mais oui, le remplissage. Alors:

• La valeur scrollHeight est égale à la hauteur minimale dont l'élément aurait besoin pour s'adapter à tout le contenu de la fenêtre sans utiliser une barre de défilement verticale. La hauteur est mesurée de la même manière que clientHeight: elle inclut le remplissage de l'élément, mais pas sa bordure, sa marge ou sa barre de défilement horizontale.