用 js 获取页面元素的位置图文总结

在作一些组件和交互时，经常须要动态获取鼠标点击位置、元素宽高和元素位置信息，网上有不少种方法，但本身没有总结过，不知道各类方法的优缺点和兼容性，在此专门的总结一下。

注意：

1. 这些关于视觉的内容都被定义在了 W3C 的 CSSOM View Module 模块中，里面有详细的接口定义和说明，建议好好研读。
2. 本文主要参照 W3C 文档全面了解各个属性的意义，对应接口文档用图文的方式直观显示各个属性的含义。但也会有一些本身没有彻底理解和错误之处，请各位批评指正，后续会继续完善。
3. 本文涉及到图片较多，为了得到最佳体验，建议使用电脑阅读。

阅读 W3C 规范的总结

Extensions to the Window Interface

图片纠错： scrollX = pageXOffset：表示滚动条在X轴方向上滚动的距离；scrollY = pageYOffset：表示滚动条在Y轴方向上滚动的距离

The Screen Interface

Extensions to the Document Interface

Extensions to the Element Interface

Extensions to the HTMLElement Interface

Extensions to the HTMLImageElement Interface

Extensions to the Range Interface

getBoundingClientRect()返回对象的属性

Extensions to the MouseEvent Interface

但愿对你有帮助，欢迎分享和批评指正~~~~~

参考

• CSSOM View Module
• CSSOM视图模式(CSSOM View Module)相关整理
• W3C DOM Core
• UIEvent
• 一张图完全掌握scrollTop, offsetTop, scrollLeft, offsetLeft......
• MDN:HTMLElement.offsetParent
• 深刻理解定位父级offsetParent及偏移大小
• offsetParent算法分析