对于offsetWidth，clientWidth，scrollWidth和-Height的了解

CSS盒子模型相当复杂，尤其是在滚动内容时。虽然浏览器使用CSS中的值来绘制一个盒子，但是如果只使用CSS，没有与JS配合使用的话是远远不够的。

因此，为方便起见，每个元素都具有六个DOM属性：offsetWidth，offsetHeight，clientWidth，clientHeight，scrollWidth和scrollHeight。这些是代表当前视觉布局的只读属性，并且它们都是整数（因此可能会产生四舍五入的误差）。

让我们了解一下它们的区别：
offsetWidth，offsetHeight：包含所有边框的可视框的大小。如果元素具有display：block，则可以通过添加宽度/高度以及填充和边框来计算。
clientWidth，clientHeight：框内容的可视部分，不包括边框或滚动条，但包括padding。无法直接从CSS计算，取决于系统的滚动条大小。
scrollWidth，scrollHeight：框的所有内容的大小，包括当前隐藏在滚动区域之外的部分。不能直接从CSS计算，取决于内容。

由于offsetWidth考虑了滚动条的宽度，因此我们可以通过公式使用它来计算滚动条的宽度：
**1) **scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

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

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