资讯专栏INFORMATION COLUMN

关于元素大小位置、鼠标位置相关属性的总结

Wildcard / 898人阅读

元素大小位置相关属性的总结 clientXXX

clientLeft

clientTop

clientWidth 表示内容区域的宽度,包括padding大小,但是不包括边框和滚动条

clientHeight 表示内容区域的高度,包括padding大小,但是不包括边框和滚动条

一图胜千言:

再线测试:https://codepen.io/zhaojianxi...

offsetXXX

offsetLeft

offsetTop

offsetWidth

offsetHeight

offsetParent 往上找非static的第一个定位元素

一图胜千言:

在线测试地址:https://codepen.io/zhaojianxi...

scrollXXX

scrollLeft

scrollTop

scrollWidth

scrollHeight

一图胜千言:

在线测试地址:https://codepen.io/zhaojianxi...

鼠标位置

clientX,clientY 相对于window的偏移量
offsetX, offsetY 相对于被点击元素的偏移量
pageX, pageY 相对于document的偏移量
screenX, screenY 鼠标相对于显示器屏幕的偏移坐标(由于是相对于屏幕的。所以在pc端没太多使用场景)
x, y 相当于clientX,clientY

我的GitHub地址:https://github.com/JesseZhao1... 欢迎关注

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52542.html

相关文章

  • 关于元素大小位置鼠标位置相关属性总结

    元素大小位置相关属性的总结 clientXXX clientLeft clientTop clientWidth 表示内容区域的宽度,包括padding大小,但是不包括边框和滚动条 clientHeight 表示内容区域的高度,包括padding大小,但是不包括边框和滚动条 一图胜千言:showImg(https://segmentfault.com/img/remote/1460000015...

    singerye 评论0 收藏0
  • JavaScript学习总结(九)事件详解

    摘要:布尔值表示捕获阶段调用事件处理程序,表示冒泡阶段通过对象的方法,也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是,当设置成时用以取消事件的默认行为与中的相同。 其实这篇文章挺早之前就写了,但是由于sf保存方面的bug,所以当时写了一大堆,结果没保存,觉得这个没写完是个不小的遗憾,今天正好有空,就给补充下了,也正好给我的javascript学习总结做...

    LiveVideoStack 评论0 收藏0
  • DOM元素位置,滚动位置鼠标事件位置相关属性函数总结

    摘要:前言前段时间经常被这些参数搞混,在此总结一下,画了一张图,希望能对大家有所帮助相关元素的左边距离可视窗口左边的距离元素的右边距离可视窗口左边的距离元素的上边距离可视窗口顶部的距离元素的下边距离可视窗口顶部的距离元素的宽元素的高目前来看与相同 前言:前段时间经常被这些参数搞混,在此总结一下,画了一张图,希望能对大家有所帮助 getBoundingClientRect相关 left 元素...

    陈江龙 评论0 收藏0
  • JavaScript 中那些关于坐标和距离属性与方法

    摘要:摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象,提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。 一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少...

    jsummer 评论0 收藏0
  • JavaScript 中那些关于坐标和距离属性与方法

    摘要:摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象,提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力...

    guqiu 评论0 收藏0

发表评论

0条评论

Wildcard

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<