scrollHeight,offsetHeight,clientHeight 区别
盒子详情
各种宽高的区别
| 属性 | 说明 | 图示 |
|---|---|---|
| clientHeight | 元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距 |  |
| offsetHeight | 元素的像素高度 包含元素的垂直内边距和边框,水平滚动条的高度,且是一个整数 |  |
| scrollHeight | 元素内容的高度,包括溢出的不可见内容 |  |
getBoundingClientRect().width / getBoundingClientRect().height
这个 JS API 也能返回 dom 元素的宽高，这个宽高实际 DOM 元素当前是最准确的宽高，是实时计算出来的，即使通过 css 对元素进行了缩放，得到的也是缩放后的实际宽高，而 offsetHeight/offsetWidth 是未缩放前的宽高
dom.style.width / dom.style.height
此种方式只能获取到 dom 节点行内样式设置的宽/高（值是字符串。如:25px）, 如果宽高不是通过行内样式设置的，则返回空字符串