元素尺寸
偏移尺寸
- offsetWidth: content + padding + border + 垂直滚动条的宽度
- offsetHeight: content + padding + border + 水平滚动条的宽度
客户端尺寸
- clientWidth: content + padding
- clientHeight: content + padding
滚动尺寸
- scrollHeight，所有内容的总高度
- scrollWidth，所有内容的总宽度
浏览器窗口尺寸
- window.innerHeight/innerWidth，网页内容的宽高
- window.outerHeight/outerHeight，整个浏览器窗口的宽高
元素位置
偏移位置
- offsetLeft/offsetTop，元素和父元素的距离
滚动距离
- scrollLeft/scrollHeight，元素左/上不可见的距离，可写，可以通过修改scrollTop修改滚动距离
客户端坐标
- 鼠标事件中，event.target上的属性
- clientX/clientY，指鼠标离浏览器边界的距离
页面坐标
- 鼠标事件中，event.target上的属性
- pageX/pageY，相当于pageX = clientX + document.body.scrollLeft，在页面没有滚动条时，二者相等
屏幕坐标
- 鼠标事件中，event.target上的属性
- screenX/screenY，指鼠标离屏幕的距离
getBoundingClientRect
- 返回一个 DOMRect 对象，包含 6 个属性：left、top、right、bottom、height 和 width
- width/height = content + padding + border
- 其他距离都是相对于浏览器视口左上角算的
参考
《JavaScript高级程序设计第四版》
