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

在 Chrome中 不能 可靠地工作，因为 Chrome 返回width时滚动条已经被减去。（另外，Chrome 会将
paddingBottom 渲染到滚动内容的底部，而其他浏览器则不会）