什么是 offsetHeight、clientHeight、scrollHeight？

javascript dom html offsetheight

2022-08-29 23:55:37

想解释一下，和或，和之间的区别是什么？offsetHeightclientHeightscrollHeightoffsetWidthclientWidthscrollWidth

在客户端工作之前，必须知道这种差异。否则，他们的一半生命将用于修复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

scrollHeight clientHeight and offsetHeight

答案 2

* offsetHeight 是元素 CSS 高度的像素度量，包括边框、填充和元素的水平滚动条。

* clientHeight 属性以像素为单位返回元素的可视高度，包括填充，但不包括边框、滚动条或边距。

* scrollHeight 值等于元素在不使用垂直滚动条的情况下适应视区中所有内容所需的最小高度。高度的测量方式与 clientHeight 相同：它包括元素的填充，但不包括其边框、边距或水平滚动条。

所有这些带有宽度而不是高度的情况也是如此。