获取鼠标的位置
鼠标对象事件 |
说明 |
e.pageX |
返回鼠标相对于文档页面的x轴坐标 |
e.pageY |
返回鼠标相对于文档页面的y轴坐标 |
e.clientX |
返回鼠标相对于浏览器窗口可视区的x轴坐标 |
e.clientY |
返回鼠标相对于浏览器窗口可视区的Y轴坐标 |
e.screenX |
返回鼠标相对于电脑屏幕的X轴坐标 |
e.screenY |
返回鼠标相对于电脑屏幕的Y轴坐标 |
获取元素的宽高
属性 |
方法 |
element.offsetWidth |
返回包括自身padding、边框、包括内容区的宽度,返回值不带单位 |
element.offsentHeight |
返回包括自身padding、边框、包括内容去的高度,返回值不带单位 |
element.clientWidth |
返回值包括padding、内容区的高度,不包含边框,返回值不带单位 |
element.clientHeight |
返回值包括padding、内容区的高度,不包含边框,返回值不带单位 |
元素滚动 scroll
实际宽高说明:如果盒子过小,内容超过了盒子,高度算的是包括超出的部分
element.scrollWidth |
返回自身实际宽度,不含边框,不带单位 |
element.scrollHeight |
返回自身实际高度,不含边框,不带单位 |
获取元素位置
属性 |
方法 |
element.offsetTop |
返回元素相对带有定位父元素上方的偏移 |
element.offsetLeft |
返回元素相对带有定位父元素做边框的偏移 |
element.clientTop |
返回元素上边框的大小 |
element.client.Left |
返回元素做边框的大小 |
元素滚动scroll
element.scrollTop |
返回被卷去的上侧的距离,返回值不带单位 |
element.scrollLeft |
返回被卷去的左侧的距离,返回值不带单位 |
他们的主要用法
-
offset系列经常用于获得元素位置 offsetLeft offsetTop
-
client系列经常用于获取元素大小 clientWidth clientHeight
-
scroll系列经常用于获取滚动距离 scrollLeft scrollTop
-
注意页面的滚动距离通过window.pageXoffset 获得