JavaScript多方法获取鼠标位置、元素的宽高、元素的位置,以及他们的主要作用详细说明

获取鼠标的位置

鼠标对象事件 说明
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 返回被卷去的左侧的距离,返回值不带单位

他们的主要用法

  1. offset系列经常用于获得元素位置 offsetLeft offsetTop

  2. client系列经常用于获取元素大小 clientWidth clientHeight

  3. scroll系列经常用于获取滚动距离 scrollLeft scrollTop

  4. 注意页面的滚动距离通过window.pageXoffset 获得

猜你喜欢

转载自blog.csdn.net/Cat_LIKE_Mouse/article/details/120115858
今日推荐