【无标题】clientWidth、offsetWidth、scrollWidth与getBoundingClientRect

概要

在JavaScript中，我们常常要获取某个 HTML 元素的尺寸。但是在js中，我们往往能获取好几种尺寸，这几种尺寸的区别是什么呢？本文给出详细解析。

clientWidth与clientHeight

clientWidth表示某个元素的可见宽度（即元素内容区域的宽度），clientHeight表示某个元素的可见高度（即元素内容区域的宽度）。
它的计算规则只包括内容和内边距，不包括边框、滚动条和外边距。
例如clientWidth = content + padding（左右两个padding都要计算上）。
例如clientHeight = content + padding（上下两个padding都要计算上）。

offsetWidth与offsetHeight

offsetWidth表示某个元素的总宽度，offsetHeight表示某个元素的总高度。
它的计算规则只包括内容和内边距和边框，不包括滚动条和外边距。
例如clientWidth = content + padding + border（左右两个padding、border都要计算上）。
例如clientHeight = content + padding + border（上下两个padding、border都要计算上）。

scrollWidth与scrollHeight

offsetWidth表示某个元素的内容区域的总宽度，包括被隐藏在视口之外的部分，offsetHeight同理。
它的计算规则只包括内容和内边距，不包括边框、滚动条和外边距。
但是有一点要特别注意：当content的区域过大以至于超过元素区域时，其scrollWidth与scrollHeight按照内容区域的宽高来算来算，包括visible和invisible两部分；如果content没有超过元素区域，则scrollWidth和scrollWidth计算方式相同，scrollHeight同理。

rect尺寸

通过调用dom元素的getBoundingClientRect()方法，我们能获得一个对象，这个对象里面记录了这个元素的width、height（当然还有top、bottom等位置信息）。这个属性与offsetWidth类似，其计算时包括元素的内容和内边距和边框。

但是从浏览器渲染原理来看，这个尺寸与前三个尺寸有很大的不同！
clientWidth、offsetWidth、scrollWidth三种属性尺寸都属于layout tree（布局树）里的尺寸，是静态的，而getBoundingClientRect()方法拿到的尺寸是属于用户最终看到的尺寸。
一句话，如果这个元素不涉及transform变换的话，rect尺寸和offset相同；如果元素应用了transform变换，rect尺寸是经过变换后的尺寸，即用户最终看到的尺寸！