Что такое offsetHeight, clientHeight, scrollHeight?

Мысль объяснить, в чем разница offsetHeight, clientHeightи scrollHeightили offsetWidth, clientWidthи scrollWidth?

Надо знать эту разницу, прежде чем работать на стороне клиента. В противном случае половина их жизни будет потрачена на исправление пользовательского интерфейса.

Скрипка или строчка ниже:

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>

Чтобы понять разницу, вы должны понимать блочную модель , но в основном:

clientHeight :

возвращает внутреннюю высоту элемента в пикселях, включая отступы, но не высоту горизонтальной полосы прокрутки , границу или поле

offsetHeight :

представляет собой измерение , которое включает в себя элемент границы , вертикальный отступ элемент, элемент горизонтальная полосы прокрутки (если он присутствует, если оно вынесено) и высота элемента CSS.

scrollHeight :

является измерением высоты содержимого элемента, включая содержимое, не видимое на экране из-за переполнения

Я сделаю это проще:

Рассматривать:

<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)
_{высота всего содержимого + отступы, независимо от высоты элемента.}

clientHeight : VISIBLE content & padding
_{только видимая высота: часть содержимого, ограниченная явно определенной высотой элемента.}

offsetHeight : VISIBLE content & padding + border + scrollbar
_{высота, занимаемая элементом в документе.}

* offsetHeight - это измерение в пикселях высоты CSS элемента, включая границы, отступы и горизонтальную полосу прокрутки элемента.

* Свойство clientHeight возвращает видимую высоту элемента в пикселях, включая отступы, но не границу, полосу прокрутки или поле.

* Значение scrollHeight равно минимальной высоте, которая требуется элементу для размещения всего содержимого в области просмотра без использования вертикальной полосы прокрутки. Высота измеряется так же, как clientHeight: она включает отступ элемента, но не его границу, поле или горизонтальную полосу прокрутки.

То же самое относится ко всем этим с шириной вместо высоты.

Мои описания для трех:

• offsetHeight : сколько пространства родительского «относительного позиционирования» занимает элемент. (т.е. он игнорирует position: absoluteпотомков элемента )
• clientHeight : То же, что и offset-height, за исключением того, что он исключает собственную границу элемента, поле и высоту горизонтальной полосы прокрутки (если она есть).
• scrollHeight : сколько места необходимо, чтобы увидеть все содержимое / потомки элемента (включая элементы position: absolute) без прокрутки.

Тогда есть также:

• getBoundingClientRect (). height : То же, что и scrollHeight, за исключением того, что он рассчитывается после применения CSS-преобразований элемента .

Смещение Означает «количество или расстояние, на которое что-то выходит за линию». Margin или Borders - это то, что делает фактическую высоту или ширину HTML-элемента «вне линии». Это поможет вам запомнить, что:

• offsetHeight - это измерение в пикселях высоты CSS элемента, включая границы, отступы и горизонтальную полосу прокрутки элемента.

С другой стороны, clientHeight - это нечто противоположное OffsetHeight. Это не включает границу или поля. Он включает в себя заполнение, потому что оно находится внутри контейнера HTML, поэтому оно не считается дополнительными измерениями, такими как margin или border. Так :

• Свойство clientHeight возвращает видимую высоту элемента в пикселях, включая отступы, но не границу, полосу прокрутки или поле.

ScrollHeight - это область прокрутки, поэтому ваш свиток никогда не переместится через ваше поле или границу, поэтому scrollHeight не включает поля или границы, но да, заполнение. Так:

• Значение scrollHeight равно минимальной высоте, которая требуется элементу для размещения всего содержимого в области просмотра без использования вертикальной полосы прокрутки. Высота измеряется так же, как clientHeight: она включает отступ элемента, но не его границу, поле или горизонтальную полосу прокрутки.