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

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

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

Скрипка, или inline ниже:

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>