前端基础-获取HTML元素的宽高和位置

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

Note: 这些关于视觉的内容都被总结在了 W3C 的 CSSOM View Module 模块中,里面有详细的接口定义和说明,建议好好研读。

阅读 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

Extensions to the MouseEvent Interface

参考