JS获取元素位置与大小

位置

clientX / clientY

• 鼠标相对于浏览器可视窗口的坐标位置

  e.clientX
  e.clientY
  

offsetX / offsetY

• 鼠标相对于元素自身左上角的坐标位置

  e.offsentX
  e.offsetY
  

pageX / pageY

• 鼠标相对于文档区域的坐标位置

  e.pageX
  e.pageY
  

screenX / screenY

• 鼠标相对于屏幕的坐标位置

  e.screenX
  e.screenY
  

offsetTop / offsetLeft

• 定位子元素相对于定位父元素的位置
• 定位元素在页面中的位置

  元素.offsetTop
  元素.offsetLeft
  

scrollTop / scrollLeft

• 文档卷起位置，可用来做回到顶部操作

  元素.scrollTop
  元素.scrollLeft
  

大小

clientWidth / clientHeight

• 元素大小，包括 width+padding

  元素.clientWidth
  元素.clientHeight
  

offsetWidth / offsetHeight

• 元素大小，包括 width+padding+border

  元素.offsetWidth
  元素.offsetHeight
  

scrollWidth / scrollHeight

• 元素大小，包括 width+padding+溢出部分

  元素.scrollWidth
  元素.scrollHight