Co to jest offsetHeight, clientHeight, scrollHeight?

Myślał o wyjaśnienia, jaka jest różnica między offsetHeight, clientHeighti scrollHeightczy offsetWidth, clientWidthi scrollWidth?

Tę różnicę należy znać przed rozpoczęciem pracy po stronie klienta. W przeciwnym razie połowa ich życia zostanie poświęcona na naprawę interfejsu użytkownika.

Fiddle lub inline poniżej:

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>

Aby poznać różnicę, musisz zrozumieć model pudełkowy , ale w zasadzie:

clientHeight :

zwraca wewnętrzną wysokość elementu w pikselach, w tym wypełnienie, ale nie wysokość poziomego paska przewijania , obramowania lub marginesu

offsetHeight :

Jest to pomiar, który zawiera do elementów obramowania , element pionowy wkładki, element poziomy pasek przewijania (jeśli jest obecny, czy usługi), a wysokość elementu CSS.

scrollHeight :

jest miarą wysokości zawartości elementu, w tym treści niewidocznej na ekranie z powodu przepełnienia

Ułatwię:

Rozważać:

<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)
_{Wysokość całej zawartości + wypełnienia, pomimo wysokości elementu.}

clientHeight : VISIBLE content & padding
_{Tylko widoczna wysokość: część zawartości ograniczona przez wyraźnie określoną wysokość elementu.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{Wysokość zajmowana przez element w dokumencie.}

* offsetHeight to miara wysokości CSS elementu w pikselach, w tym obramowanie, wypełnienie i poziomy pasek przewijania elementu.

* Właściwość clientHeight zwraca widoczną wysokość elementu w pikselach, w tym wypełnienie, ale nie obramowanie, pasek przewijania ani margines.

* wartość scrollHeight jest równa minimalnej wysokości, jakiej wymagałby element, aby zmieścić całą zawartość w rzutni bez użycia pionowego paska przewijania. Wysokość jest mierzona w taki sam sposób, jak ClientHeight: obejmuje dopełnienie elementu, ale nie jego obramowanie, margines ani poziomy pasek przewijania.

To samo dotyczy wszystkich z szerokością zamiast wysokości.

Moje opisy dla trzech:

• offsetHeight : ile miejsca „względnego pozycjonowania” rodzica zajmuje element. (tzn. ignoruje position: absolutepotomków elementu )
• clientHeight : Taki sam jak offset-height, z tym wyjątkiem, że wyklucza własne obramowanie elementu, margines i wysokość poziomego paska przewijania (jeśli taki ma).
• scrollHeight : Ile miejsca potrzeba, aby zobaczyć całą zawartość / potomków elementu (w tym position: absolutetych) bez przewijania.

Jest też:

• getBoundingClientRect (). height : Taki sam jak scrollHeight, z tym wyjątkiem, że jest obliczany po zastosowaniu transformacji css elementu .

Przesunięcie Oznacza „wielkość lub odległość, o którą coś jest poza linią”. Margines lub krawędzie to coś, co sprawia, że ​​rzeczywista wysokość lub szerokość elementu HTML jest „poza linią”. Pomoże ci pamiętać, że:

• offsetHeight to miara wysokości CSS elementu w pikselach, w tym obramowanie, wypełnienie i poziomy pasek przewijania elementu.

Z drugiej strony, clientHeight to coś, co można powiedzieć, że jest przeciwieństwem OffsetHeight. Nie zawiera granicy ani marginesów. Zawiera dopełnienie, ponieważ jest to coś, co znajduje się wewnątrz kontenera HTML, więc nie liczy się jako dodatkowe pomiary, takie jak margines lub obramowanie. Więc :

• właściwość clientHeight zwraca widoczną wysokość elementu w pikselach, w tym wypełnienie, ale nie obramowanie, pasek przewijania ani margines.

ScrollHeight to cały przewijalny obszar, więc przewijanie nigdy nie będzie przekraczać marginesu lub granicy, dlatego scrollHeight nie zawiera marginesu ani granic, ale tak, wypełnienie. Więc:

• wartość scrollHeight jest równa minimalnej wysokości, jakiej wymagałby element, aby zmieścić całą zawartość w rzutni bez użycia pionowego paska przewijania. Wysokość jest mierzona w taki sam sposób, jak ClientHeight: obejmuje dopełnienie elementu, ale nie jego obramowanie, margines ani poziomy pasek przewijania.