js中各种长度的含义

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 可视宽度+隐藏宽度
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 width+左右padding
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。width+左右padding+左右border
各Height同理

clientTop:上边框宽度
offsetTop:元素的上外边缘到最近定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘到文档内壁的距离。
scrollTop:对象实际内容的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。

所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数,单位是像素。此属性是只读的。

鼠标事件发生时
clientX:鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标; 不随滚动条滚动而改变;
clientY:鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标; 不随滚动条滚动而改变;
pageX:鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标; 随滚动条滚动而改变;
pageY:鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标; 随滚动条滚动而改变;
screenX:鼠标相对于显示器屏幕左上角x轴的坐标;
screenY:鼠标相对于显示器屏幕左上角y轴的坐标;
offsetX:鼠标相对于事件源左上角X轴的坐标
offsetY:鼠标相对于事件源左上角Y轴的坐标

下面放一张某位大佬做的图,标记的很详细。
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值