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


235

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>


6
Cette question semble être hors sujet car elle fournit simplement un conseil. La seule question se trouve dans le titre de la «question».
enhzflep

Réponses:


544

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.

scrollHeight clientHeight et offsetHeight


et si vous voulez juste une hauteur visible
Muhammad Umer

2
C'est clientHeightla hauteur visible
Andre Figueiredo

9
C'est pourquoi j'aime SO, merci pour l'effort pour le rendre si clair!
Herick

2
Remarque: offsetHeight peut retourner null si l'élément a la position: fixed. SVG offsetHeight est obsolète dans Chrome. offsetHeight retournera null si l'élément est display: none, ou a un ancêtre avec display: none
Drenai

3
mon scrollHeightet clientHeightsont tous les deux identiques malgré que l'écran ait plus de contenu et une barre de défilement. Pourquoi?
blankface

5

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


2

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:


La note sur les transformations CSS est assez importante dans ce cas.
Jan Bradáč

0

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.
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.