StackOverflow 上有几个关于offsetWidth / clientWidth / scrollWidth (and -Height，分别），但没有人给出这些值的全面解释。
此外，网络上有多个来源提供了令人困惑或不正确的信息。
您能否给出完整的解释，包括一些视觉提示？
另外，如何使用这些值来计算滚动条宽度？
CSS 盒子模型相当复杂，尤其是在滚动内容时。虽然浏览器使用 CSS 中的值来绘制框，但如果您只有 CSS，则使用 JS 确定所有尺寸并不简单。
这就是为什么每个元素都有六个 DOM 属性以方便您使用：offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth and scrollHeight。这些是代表当前视觉布局的只读属性，并且所有这些属性都是integers（因此可能会出现舍入误差）。
让我们详细了解一下它们：
-
offsetWidth, offsetHeight：虚拟框的大小，包括所有边框。可以通过添加来计算width/height以及填充和边框（如果元素有）display: block
-
clientWidth, clientHeight：框内容的视觉部分，不包括边框或滚动条，但包括填充。不能直接从CSS计算，取决于系统的滚动条大小。
-
scrollWidth, scrollHeight：框所有内容的大小，包括当前隐藏在滚动区域之外的部分。不能直接从CSS计算，要看内容。
试试看：jsFiddle http://jsfiddle.net/y8Y32/25/
Since offsetWidth考虑到滚动条宽度，我们可以用它通过公式计算滚动条宽度
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth
不幸的是，我们可能会遇到舍入错误，因为offsetWidth and clientWidth始终是整数，而实际大小可能是缩放级别不是 1 的小数。
请注意，这
scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth
does not由于 Chrome 已回归，因此可以在 Chrome 中可靠地工作width滚动条已经被减去。 （此外，Chrome 将 padding Bottom 渲染到滚动内容的底部，而其他浏览器则不会）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
