BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】offsetHeight, clientHeight, scrollHeightとは何ですか？

2022-03-30 02:59:19

質問

とは何が違うのか、説明しようと思いました。 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>

解決方法は？

この違いを知るには ボックスモデル が、基本的には

クライアントハイト :

要素の内側の高さを、パディングを含めてピクセル単位で返します。 ではない 水平方向の スクロールバーの高さ , ボーダー または マージン

オフセットハイト :

は、以下のような測定値です。 を含む 要素 ボーダー 要素には垂直方向のパディング、要素には水平方向の スクロールバー (存在する場合、レンダリングされる場合)および要素の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>

スクロールハイト : ENTIRE content & padding (visible or not)

<サブ 要素の高さにかかわらず、すべてのコンテンツ＋パディングの高さ。

クライアントハイト : VISIBLE content & padding

<サブ 見える高さのみ：明示的に定義された要素の高さによって制限されるコンテンツ部分。

オフセットハイト : VISIBLE content & padding + border + scrollbar

<サブ ドキュメント上で要素が占める高さ。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します