Co to jest offsetHeight, clientHeight, scrollHeight?


235

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>


6
To pytanie wydaje się być nie na temat, ponieważ stanowi jedynie wskazówkę. Jedyne pytanie znajduje się w tytule „pytanie”.
enhzflep

Odpowiedzi:


544

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.

scrollHeight clientHeight i offsetHeight


a jeśli chcesz tylko widoczną wysokość
Muhammad Umer

2
clientHeightJest widoczne wysokość
Andre Figueiredo

9
Właśnie dlatego uwielbiam SO, dziękuję za wysiłek, aby było to tak jasne!
Herick

2
Uwaga: offsetHeight może zwracać null, jeśli element ma pozycję: naprawiono. Przesunięcie SVG Wysokość jest przestarzała w Chrome. offsetHeight zrestartuje się, jeśli element jest wyświetlany: brak lub ma przodka z wyświetlaczem: brak
Drenai

3
moje scrollHeighti clientHeightoba pojawiają się tak samo, mimo że ekran ma więcej treści i pasek przewijania. Czemu?
blankface

5

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


2

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ż:


Uwaga na temat transformacji css jest w tym przypadku dość ważna.
Jan Bradáč,

0

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.
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.