web-dev-qa-db-fra.com

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

Vous pensez expliquer quelle est la différence entre offsetHeight, clientHeight et scrollHeight ou offsetWidth, clientWidth et 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.

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

javascripthtmldomoffsetheight
178
shibualexis

Pour connaître la différence, vous devez comprendre le modèle box , mais fondamentalement:

clientHeight :

renvoie la hauteur interne d'un élément en pixels, y compris le remplissage, mais not la hauteur horizontale scrollbar, border ou margin

offsetHeight :

est une mesure qui inclut l'élément bordures, l'élément de remplissage vertical, l'élément horizontal scrollbar (si présent, si rendu) et la hauteur CSS de l'élément.

scrollHeight :

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

Je vais le rendre plus facile:

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 tous les contenus + rembourrages, malgré la hauteur de l'élément.

clientHeight: VISIBLE content & padding
Hauteur visible uniquement: 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.

scrollHeightclientHeight and offsetHeight

435
Andre Figueiredo

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

* clientHeight property 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 value est égal à la hauteur minimale requise par l'élément pour contenir tout le contenu de la fenêtre sans utiliser de 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 ceux-ci avec largeur au lieu de hauteur.

0
Steev James