什么是 offsetHeight、clientHeight、scrollHeight？

IT技术 javascript html dom offsetheight
2021-01-21 18:06:15

想解释之间有什么区别的offsetHeight，clientHeight和scrollHeight或offsetWidth，clientWidth和scrollWidth？

在客户端工作之前，必须了解这种差异。否则，他们将有一半的时间花在修复 UI 上。

Fiddle，或内联如下：

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>

4个回答

要了解差异，您必须了解盒模型，但基本上：

客户高度：

以像素为单位返回元素的内部高度，包括填充但不包括水平滚动条高度、边框或边距

偏移高度：

是一个度量，包括元素边框、元素垂直填充、元素水平滚动条（如果存在，如果呈现）和元素 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

该clientHeight是高度可见
2021-03-17 18:06:15
如果你只想要可见的高度
2021-03-27 18:06:15
注意：如果元素具有 position:fixed，offsetHeight 可能会返回 null。Chrome 中不推荐使用 SVG offsetHeight。如果元素为 display:none 或具有 display:none 的祖先，则 offsetHeight 将返回 null
2021-03-29 18:06:15
@ZeroDarkThirty 你在 Safari 吗？
2021-04-07 18:06:15
尽管屏幕有更多内容和滚动条，但我scrollHeight和clientHeight两者都出现了相同的情况。为什么？
2021-04-08 18:06:15

* offsetHeight是以像素为单位的元素 CSS 高度的度量，包括边框、内边距和元素的水平滚动条。

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

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

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

我对三者的描述：

  • offsetHeight：元素占用了多少父元素的“相对定位”空间。（即它忽略元素的position: absolute后代）
  • clientHeight：与 offset-height 相同，除了它不包括元素自己的边框、边距和其水平滚动条的高度（如果有的话）。
  • scrollHeight：在position: absolute不滚动的情况下查看所有元素的内容/后代（包括那些）需要多少空间。

然后还有：

在这种情况下，关于 css 转换的说明非常重要。
2021-04-03 18:06:15

偏移 表示“某物偏离的数量或距离”。边距或边框是使 HTML 元素的实际高度或宽度“越界”的东西。它将帮助您记住：

  • offsetHeight是以像素为单位的元素 CSS 高度的度量，包括边框、内边距和元素的水平滚动条。

另一方面，clientHeight 与 OffsetHeight 正好相反。它不包括边框或边距。它确实包括内边距，因为它位于 HTML 容器内部，因此它不算作边距或边框之类的额外测量值。所以 ：

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

ScrollHeight 是所有可滚动区域，因此您的滚动永远不会超过您的边距或边框，这就是为什么 scrollHeight 不包含边距或边框但填充包含的原因。所以：

  • scrollHeight值等于元素需要的最小高度，以便在不使用垂直滚动条的情况下适应视口中的所有内容。高度的测量方式与 clientHeight 相同：它包括元素的内边距，但不包括其边框、边距或水平滚动条。
其它你可能感兴趣的问题
上一篇substr 和 substring 有什么区别？ 下一篇使用 socket.io 和 node.js 向特定客户端发送消息