offset、client、scroll属性返回元素的宽高之区别

offset、client、scroll属性

offset、client、scroll属性都可以动态地返回元素的大小。

offsetWidth 和 offsetHeight 得到元素的宽度和高度时，是包含padding+border+width的
clientWidth 和 clientHeight 返回元素的宽高时，不包含边框border，只有padding+width
scrollWidth 和 scrollHeight 返回元素的宽高时，同样不包含边框border，只有padding+width

注意： 返回的数值都不带单位

但是client和scroll还有个比较明显的区别是：

（1）当盒子的内容未超出盒子时
clientHeight 和 scrollHeight 返回的都是不包含边框的盒子的高度。

（2）但是当如果盒子里的内容超出了盒子的区域
用 clientHeight 就会只是返回盒子的高度
用 scrollHeight 是返回盒子实际内容的高度

总结：

1. offset系列 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop scrollLeft