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

3,266 阅读1分钟

在做一些组件和交互时,常常需要动态获取鼠标点击位置、元素宽高和元素位置信息,网上有很多种方法,但自己没有总结过,不知道各种方法的优缺点和兼容性,在此专门的总结一下。

注意:

  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

希望对你有帮助,欢迎分享和批评指正~~~~~

参考