想解释offsetHeight
,clientHeight
和scrollHeight
或offsetWidth
,clientWidth
和scrollWidth
之间的区别是什么?
在客户端工作之前,必须知道这种差异。否则,他们的一半生命将用于修复用户界面。
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>
答案 0 :(得分:459)
要了解差异,你必须了解box model,但基本上是:
返回元素的内部高度(以像素为单位),包括填充但不水平滚动条高度,边框或边距强>
是包含元素边框,元素垂直填充,元素水平滚动条(如果存在,如果呈现)和元素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
文档中元素占用的高度。
答案 1 :(得分:2)
* offsetHeight 是元素CSS高度的度量单位,包括边框,填充和元素的水平滚动条。
* clientHeight 属性返回元素的可见高度(以像素为单位),包括填充,但不包括边框,滚动条或边距。
* scrollHeight 值等于元素的最小高度,以便在不使用垂直滚动条的情况下适合视口中的所有内容。高度的测量方法与clientHeight相同:它包括元素的填充,但不包括其边框,边距或水平滚动条。
所有这些都是宽度而不是高度的情况。
答案 2 :(得分:1)
我对三个的描述:
position: absolute
后代)position: absolute
个元素)需要多少空间。然后还有:
答案 3 :(得分:1)
偏移量是指“某物偏离的量或距离”。边距或边框使HTML元素的实际高度或宽度“偏离直线”。它可以帮助您记住:
- offsetHeight 是元素CSS的度量单位 高度,包括边框,填充和元素的水平 滚动条。
另一方面,clientHeight可以说是OffsetHeight的反义词。它不包括边框或边距。它确实包含填充,因为它位于HTML容器内部,因此不算为多余的度量(如边距或边框)。所以:
- clientHeight 属性返回元素的可见高度 像素,包括填充,但不包括边框,滚动条或边距。
ScrollHeight是所有可滚动区域,因此您的滚动将永远不会越过边界或边框,因此这就是为什么scrollHeight不包括边界或边框但是填充的原因。所以:
- scrollHeight 值等于元素所需的最小高度,以便在不使用的情况下适合视口中的所有内容 垂直滚动条。高度的测量方法与 clientHeight:它包含元素的填充,但不包括其边框, 边距或水平滚动条。