js在获取宽高,距离以及坐标上有很多不同的方式，在这里对常用的方式进行一下汇总

先放一张图

元素大小

• width和height
  可以获取元素行内样式style的大小
• width()和height()
  可以获取元素实际大小
• clientWidth和clientHeight
  可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。
  border,margin无效，padding生效，有滚动条的话会减去滚动条，只考虑可视区域本身。
• offsetWidth和offsetHeight
  返回元素的实际大小，包含边框，内边距和滚动条，即border，padding均生效，有无滚动条不影响，margin不生效。
• scrollWidth和scrollHeight
  可以获取滚动内容(可见内容)的元素大小，即overflow部分本身的高度。
  margin无效，padding和滚动条生效，Firefox和Opera中border生效， IE、Chrome和Safari中不生效。

  元素周边距离

• clientLeft和clientTop获取边框大小
  可以获取元素左边框和上边框的值
• offsetLeft和offsetTop
  可以获取当前元素相对于父元素的位置
• scrollTop()和scrollLeft()
  获取和整个滚动区域顶部和左侧的距离
• offset()
  获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top 和 left
• position()
  获取匹配元素相对父元素的偏移，返回类型同上

document.body

• clientWidth和clientHeight
  元素可视区域尺寸
• offsetWidth和offsetHeight
  跟一般元素的计算方式一样，这里是body元素
• scrollWidth和scrollHeight
  有滚动时，大于window视窗可见尺寸，包含整个滚动区域

window

• innerWidth和innerHeight
  窗口中文档显示区域的尺寸，不包括边框，滚动条和菜单栏等部分所占尺寸，该属性可读可写。
• outerWidth和outerHeight
  窗口本身的尺寸，包含边框，滚动条，菜单栏等尺寸，该属性可读可写。
• screenTop和screenLeft
  网页正文部分的上方和左侧
• screen.width和screen.height
  屏幕分辨率的宽高
• screen.availWidth和screen.availHeight
  屏幕可用工作区宽高

坐标

• e.pageX
  相对整个页面的坐标
• e.layerX
  相对当前坐标系的实际大小的坐标
• e.offsetX
  相对当前坐标系的实际大小的坐标
• e.clientX
  相对当前坐标系的可视区域的坐标
• e.screenX
  相对于屏幕的水平坐标。

touch

• ev.touches[0].pageX
  start/move事件获取坐标
• ev.changedTouches[0].pageX
  end事件获取坐标