-
获取鼠标当前位置
- clientY、clientX: 鼠标当前位置 相对于
浏览器可视区域顶部、浏览器可视区域左部
的位置; - pageY、pageX: 鼠标当前位置 相对于
文档顶部、文档左部
的位置; - screenY、screenX:鼠标当前位置 相对于
屏幕顶部、屏幕左部
的位置; - offsetY、offsetY:鼠标的当前位置 相对于
目标节点
的内填充边顶部、内填充边左部
的位置。内填充边意思是不包含border,但包含padding,类似于padding-box。 - 他们均是鼠标事件的一级属性 ,如e.clientY
- clientY、clientX: 鼠标当前位置 相对于
-
获取某一元素的区域
Element.getBoundingClientRect()
- 该方法获取的是该元素相对于
视口
的位置 - top、bottom、left、right:分别是该元素的元素框(盒模型)上下左右位置距视口的距离。其中,top和bottom是距
视口上边界
的距离,left和right是距视口左边界
的距离。 - width、height:分别是该元素的元素框(盒模型)的宽度和高度,这个宽高是border以内并且包含border,类似于
border-box
。
- 该方法获取的是该元素相对于
原生JS中获取位置的方案总结
最新推荐文章于 2024-06-20 16:52:52 发布