什么是offsetHeight，clientHeight，scrollHeight？

想解释什么是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> 

Answer 1

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

clientHeight ：

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

offsetHeight ：

是包含元素边框 ，元素垂直填充，元素水平滚动条 （如果呈现，如果呈现）和元素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)
_{所有内容+填充的高度，尽pipe元素的高度。}

clientHeight ： VISIBLE content & padding
_{只有可见的高度：内容部分由元素明确定义的高度限制。}

offsetHeight ： VISIBLE content & padding + border + scrollbar
_{文件上的元素占用的高度。}