什么是offsetHeight, clientHeight, scrollHeight?

想要解释offsetHeight， clientHeight和scrollHeight或offsetWidth， clientWidth和scrollWidth之间的区别是什么?

在客户端工作之前，必须了解这个区别。否则他们的一半生命将花在修复UI上。

小提琴，或inline below:

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>

208230 次浏览
小开
最佳答案

要知道区别，你必须理解盒模型，但基本上:

clientHeight:

返回元素的内部高度(以像素为单位)，包括填充，但不为水平的滚动条的高度， 边境或保证金

offsetHeight:

是元素包括，元素边界，元素垂直填充，元素水平滚动条(如果存在，如果呈现)和元素CSS高度的测量值。

scrollHeight:

是在屏幕上测量元素内容的高度包括 content 不可见的 由于溢出

我会让它更简单:

考虑:

<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>
< p > scrollHeight: ENTIRE content & padding (visible or not) < br > 所有内容的高度+填充，不管元素的高度如何。

< p > clientHeight: VISIBLE content & padding < br > 只有可见高度:内容部分受元素显式定义的高度限制

offsetHeight: VISIBLE content & padding + border + scrollbar
文档中元素所占的高度

scrollHeight clientHeight and offsetHeight

小开

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

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

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

同样的情况下，所有这些宽度而不是高度。

小开

我对这三种类型的描述如下:

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

还有:

小开

抵消意思是“某物偏离直线的数量或距离”。边距或边框是使HTML元素的实际高度或宽度“出线”的东西。它会帮助你记住:

  • offsetHeight是元素CSS的像素度量值 高度，包括边框，填充和元素的水平 李滚动条。< / >

另一方面，clientHeight可以说是OffsetHeight的相反。它不包括边界或边缘。它确实包括填充，因为它是驻留在HTML容器内的东西，所以它不算作额外的测量，如边距或边框。所以:

  • clientHeight属性返回中元素的可视高度 像素，包括填充，但不包括边框、滚动条或边距

ScrollHeight是所有可滚动的区域，所以你的滚动永远不会超过你的边距或边框，这就是为什么ScrollHeight不包括边距或边框，但填充有。所以:

  • scrollHeight值等于元素在不使用的情况下适合视口中所有内容所需的最小高度 垂直滚动条。高度的测量方法与 clientHeight:它包括元素的填充，但不包括它的边框，

提交答案