offsetHeight、clientHeight、scrollHeightとは何ですか？

offsetHeight、clientHeightおよびscrollHeightまたはoffsetWidth、clientWidthおよびの違いは何scrollWidthですか？

クライアント側で作業する前に、この違いを知っておく必要があります。そうでなければ、彼らの人生の半分はUIの修正に費やされます。

フィドル、または以下のインライン：

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と同じ方法で測定されます。要素のパディングは含まれますが、境界線、マージン、水平スクロールバーは含まれません。

高さの代わりに幅を持つこれらすべての場合も同じです。

3つの私の説明：

• offsetHeight：要素が占める親の「相対配置」スペースの大きさ。（つまり、要素のposition: absolute子孫を無視します）
• clientHeight：offset-heightと同じですが、要素自体のボーダー、マージン、および水平スクロールバー（ある場合）の高さが除外されます。
• scrollHeight：position: absoluteスクロールせずに要素のコンテンツ/子孫（コンテンツを含む）をすべて表示するために必要なスペースの量。

それからまたあります：

• getBoundingClientRect（）。height：scrollHeightと同じですが、要素のcss変換が適用された後に計算される点が異なります。

オフセットは、「線が外れる量または距離」を意味します。マージンまたはボーダーは、HTML要素の実際の高さまたは幅を「行外」にするものです。それを覚えておくのに役立ちます：

• offsetHeightは、境界線、パディング、要素の水平スクロールバーを含む、要素のCSS高さのピクセル単位の測定です。

一方、clientHeightは、OffsetHeightの逆のようなものです。ボーダーやマージンは含まれません。これは、HTMLコンテナー内に存在するものであるため、パディングが含まれています。マージンや境界線などの追加の測定値としてはカウントされません。そう ：

• clientHeightプロパティは、要素の表示可能な高さをピクセル単位で返します。ただし、境界線、スクロールバー、マージンは含まれません。

ScrollHeightはすべてのスクロール可能な領域であるため、スクロールがマージンまたは境界を超えることはありません。そのため、scrollHeightにはマージンまたは境界は含まれませんが、パディングは含まれます。そう：

• scrollHeightの値は、垂直スクロールバーを使用せずにビューポートのすべてのコンテンツに合わせるために要素が必要とする最小の高さに等しくなります。高さはclientHeightと同じ方法で測定されます。要素のパディングは含まれますが、境界線、マージン、水平スクロールバーは含まれません。