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 是返回盒子实际内容的高度
总结:
- offset系列 经常用于获得元素位置 offsetLeft offsetTop
- client 经常用于获取元素大小 clientWidth clientHeight
- scroll 经常用于获取滚动距离 scrollTop scrollLeft