获取元素位置和大小

offset【获取元素位置和大小】

dom.offsetLeft ---> 水平偏移
☞ dom.offsetTop ---> 垂直偏移
备注:
1.offsetLeft默认是相对整个HTML标签,如果其父元素是一个定位元素那么就相对其父元素(类似于css中的绝对定位)

☞ dom.offsetWidth ---> 获取当前元素在浏览器中的实际宽度(内容+边框+内边距)
☞ dom.offsetHeight ---> 获取当前元素在浏览器中的实际高度(内容+边框+内边距)

client【获取元素位置和大小】

☞ dom.clientLeft --> 获取元素边框的左边框的宽度
☞ dom.clientTop ---> 获取元素上边框的宽度

☞ dom.clientWidth --> 元素宽度【不包括边框,但是包括内边距】
☞ dom.clientHeight --> 元素高度【不包括边框,但是包括内边距】

总结:
clientHeight = 内容区域 + padding
clientWidth = 内容区域 + padding

scroll【获取元素位置和大小】

☞ dom.scrollLeft --->
☞ dom.scrollTop --->滚动条向上滚动的距离【内容滚出去的距离】 [滚动事件 onscroll]

☞ dom.scrollWidth --->
1. 如果内容区域小于当前元素,那么scrollWidth就代表当前元素大小【算内边距,不算边框】
2. 如果内容区域大于当前元素,那么scrollWidth就等于内容区域大小 + 左内边距

原文地址:https://www.cnblogs.com/lxsunny/p/12460448.html