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

Question

StackOverflow 上有几个关于 offsetWidth/clientWidth/scrollWidth (和 -Height 分别)的问题，但没有一个全面解释这些值是什么。

此外，网络上有几个来源提供了令人困惑或不正确的信息。

您能否给出完整的解释，包括一些视觉提示？另外，这些值如何用于计算滚动条宽度？

Answer 1

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

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

让我们详细介绍一下:

• offsetWidth、offsetHeight:包含所有边框的可视框的大小。可以通过添加 width/height 以及填充和边框来计算，如果元素有 display: block
• clientWidth、clientHeight:框内容的可视部分，不包括边框或滚动条，但包括填充。无法直接从 CSS 计算，取决于系统的滚动条大小。
• scrollWidth、scrollHeight:所有框内容的大小，包括当前隐藏在滚动区域之外的部分。无法直接从 CSS 计算，取决于内容。

试试看:jsFiddle

---

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

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

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

注意这个

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

not 在 Chrome 中是否可靠工作，因为 Chrome 返回的 width 已经减去滚动条。 (另外，Chrome 会将 paddingBottom 渲染到滚动内容的底部，而其他浏览器则不会)