javascript获取dom元素位置和尺寸大小

clientHeight和clientWidth: 用于描述元素内尺寸: 元素内容 + padding
offsetHeight和offsetWidth: 用于描述袁术外尺寸: 元素内容 + padding + border

clientTop和clientLeft: 返回上,左边框宽度.
offsetTop和offsetLeft: 表示该元素的左上角(边框外边缘)与已定位的父容器左上角的距离
这里可以看到: offsetWidth = 2 * clientLeft + clientWidth
offsetTop = 子元素的margin + 定位父元素的padding

scrollWidth和scrollHeight是元素的内容区域 + padding + 溢出尺寸;当内容正好和内容区域匹配没有溢出时,这些属性和clientWidth,clientHeight相等.

scrollLeft和scrollTop是指元素滚动条的位置,他们是可写的

我们经常用到的document就是整个页面部分,即文档,它的左上角就是我们所谓相对于文档坐标的原点;
视口是显示文档内容的浏览器的一部分,它不包括浏览器外壳,也就是当前窗口显示页面的部分,不包括滚动条
一般来讲,在两种坐标系之间进行切换,需要加减滚动的偏移量
文档坐标
视口坐标
getBoundingClientRect()函数,返回视口坐标.包含元素的内边距和边框

参考: JavaScript获取DOM元素位置和尺寸大小