什么是offsetHeight，clientHeight，scrollHeight？

235

想解释之间有什么区别的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>

展开摘要

— Shibualexis
source

6

这个问题似乎是题外话，因为它只是一个提示。唯一的问题是“问题”标题。

— enhzflep 2014年

543

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

clientHeight：

返回元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条的height，border或margin

offsetHeight：

是一个度量，包括元素borders，元素垂直填充，元素水平滚动条（如果存在，如果呈现）和元素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
_{文档上元素所占的高度。}

scrollHeight clientHeight和offsetHeight

— 安德烈·菲格雷多（Andre Figueiredo）
source

如果您只想看得见的身高

— 穆罕默德·乌默尔

2

这clientHeight是可见的高度

— Andre Figueiredo

9

这就是为什么我如此爱着，感谢您所做的努力使它变得如此清晰！

— Herick '16

2

注意：如果元素具有position：fixed，则offsetHeight可能返回null。Chrome不建议使用SVG offsetHeight。如果元素为display：none或祖先的display：none，则offsetHeight将重新运行为null

— Drenai

3

尽管屏幕上有更多内容和滚动条，但my scrollHeight和my clientHeight都一样。为什么？

— blankface '18

5

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

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

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

所有这些都是宽度而不是高度的情况相同。

— 史蒂夫·詹姆斯
source

2

我对三个的描述：

offsetHeight：元素占用父级的“相对定位”空间的多少。（即，它忽略元素的position: absolute后代）
clientHeight：与offset-height相同，只不过它排除了元素自身的边框，边距和其水平滚动条的高度（如果有的话）。
scrollHeight：需要多少空间才能position: absolute不滚动即可查看元素的所有内容/后代（包括下一个）。

然后还有：

getBoundingClientRect（）。height：与scrollHeight相同，除了它是在应用元素的css变换之后计算的。

— Venryx
source

在这种情况下，有关css转换的注释非常重要。

— JanBradáč19年

0

偏移量是指“某物偏离的量或距离”。边距或边框使HTML元素的实际高度或宽度“偏离直线”。它会帮助您记住：

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

另一方面，clientHeight是与OffsetHeight相反的东西。它不包括边框或边距。它的确包含了填充，因为它位于HTML容器内，因此不算作多余的度量（如边距或边框）。因此：

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

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

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

— Sagar Bajpai
source