html - 分别了解offsetWidth，clientWidth，scrollWidth和-Height

在StackOverflow上有几个关于offsetWidth/clientWidth/scrollWidth(和-Height)的问题，但是没有一个问题可以全面解释这些值是什么。
另外，网络上有多个来源提供令人困惑或不正确的信息。
您能否给出完整的解释，包括一些视觉提示？
另外，这些值如何用于计算滚动条宽度？

最佳答案

CSS盒子模型相当复杂，尤其是在滚动内容时。虽然浏览器使用CSS中的值来绘制框，但是如果您只有CSS，则使用JS确定所有尺寸并不是直截了当的。

这就是每个元素具有六个DOM属性以方便您的原因:offsetWidth，offsetHeight，clientWidth，clientHeight，scrollWidth和scrollHeight。这些是代表当前视觉布局的只读属性，并且它们都是整数(因此可能会舍入错误)。

让我们详细了解一下它们:

offsetWidth，offsetHeight:包括所有边框的可视框的大小。如果元素具有width

，则可以通过添加height/display: block以及填充和边框来计算

clientWidth，clientHeight:框内容的可视部分，不包括边框或滚动条，但包括padding。不能直接从CSS计算，取决于系统的滚动条大小。

scrollWidth，scrollHeight:盒子所有内容的大小，包括当前隐藏在滚动区域之外的部分。不能直接从CSS计算，取决于内容。

试试看:jsFiddle

由于offsetWidth考虑了滚动条的宽度，因此我们可以通过公式使用它来计算滚动条的宽度

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

不幸的是，由于offsetWidth和clientWidth始终为整数，而缩放级别不是1时，实际大小可能是分数，因此我们可能会舍入错误。

请注意

scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

Chrome会返回而不是吗，因为Chrome会返回已减去滚动条的width。 (此外，Chrome会将paddingBottom渲染到滚动内容的底部，而其他浏览器则不这样做)