元素大小位置相关属性的总结 clientXXX
clientLeft
clientTop
clientWidth 表示内容区域的宽度,包括padding大小,但是不包括边框和滚动条
clientHeight 表示内容区域的高度,包括padding大小,但是不包括边框和滚动条
一图胜千言:
再线测试:https://codepen.io/zhaojianxi...
offsetXXXoffsetLeft
offsetTop
offsetWidth
offsetHeight
offsetParent 往上找非static的第一个定位元素
一图胜千言:
在线测试地址:https://codepen.io/zhaojianxi...
scrollXXXscrollLeft
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...
摘要:布尔值表示捕获阶段调用事件处理程序,表示冒泡阶段通过对象的方法,也可以定义事件的回调函数。对象会被作为第一个参数传递给事件监听的回调函数。布尔默认值是,当设置成时用以取消事件的默认行为与中的相同。 其实这篇文章挺早之前就写了,但是由于sf保存方面的bug,所以当时写了一大堆,结果没保存,觉得这个没写完是个不小的遗憾,今天正好有空,就给补充下了,也正好给我的javascript学习总结做...
摘要:前言前段时间经常被这些参数搞混,在此总结一下,画了一张图,希望能对大家有所帮助相关元素的左边距离可视窗口左边的距离元素的右边距离可视窗口左边的距离元素的上边距离可视窗口顶部的距离元素的下边距离可视窗口顶部的距离元素的宽元素的高目前来看与相同 前言:前段时间经常被这些参数搞混,在此总结一下,画了一张图,希望能对大家有所帮助 getBoundingClientRect相关 left 元素...
摘要:摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象,提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。 一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少...
摘要:摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象,提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力...
阅读 1584·2021-09-30 09:47
阅读 3580·2021-09-22 15:05
阅读 2828·2021-08-30 09:44
阅读 3616·2019-08-30 15:55
阅读 1364·2019-08-30 13:08
阅读 1322·2019-08-29 16:40
阅读 544·2019-08-29 12:45
阅读 1379·2019-08-29 11:25