☰

offsetHeight、clientHeight、scrollHeightとは何ですか? 質問する

tag-icon • tag-icon javascript html dom offsetheight
offsetHeight、clientHeight、scrollHeightとは何ですか? 質問する

とoffsetHeight、または との違いは何なのかを説明しようと思いました。clientHeightscrollHeightoffsetWidthclientWidthscrollWidth

クライアント側で作業する前に、この違いを知っておく必要があります。そうしないと、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>

ベストアンサー1

違いを知るには、ボックスモデル基本的には次のようになります。

クライアントの高さ:

要素の内部の高さをピクセル単位で返します。パディングは含まれますが、水平スクロールバーの高さ、境界線、または余白は含まれません。

オフセット高さ:

要素の境界線、要素の垂直パディング、要素の水平スクロールバー（存在する場合、レンダリングされる場合）、および要素の CSS の高さを含む測定値です。

スクロール高さ:

オーバーフローにより画面上に表示されないコンテンツを含む要素のコンテンツの高さの測定値です。

もっと簡単に説明します:

考慮する：

<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
ドキュメント上の要素が占める高さ。

スクロール高さ clientHeight と offsetHeight

おすすめ記事