JavaScript 中 offsetWidth,offsetHeight,clientWidth,clientHeight 等属性归纳

offsetWidth返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
offsetHeight返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
clientWidth返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
clientHeight返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
style.width返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)
style.height返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
scrollWidth返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同
scrollHeigh返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
offsetTop返回元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数,单位是像素。此属性是只读的。
offsetLeft此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。
scrollLeft此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。返回值是一个整数,单位是像素。此属性是可读写的。
scrollTop此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。返回值是一个整数,单位是像素。此属性是可读写的。

当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等)

clientX鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标; 不随滚动条滚动而改变;
clientY鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标; 不随滚动条滚动而改变;
pageX鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标; 随滚动条滚动而改变;
pageY鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标; 随滚动条滚动而改变;
screenX鼠标相对于显示器屏幕左上角x轴的坐标;
screenY鼠标相对于显示器屏幕左上角y轴的坐标;
offsetX鼠标相对于事件源左上角X轴的坐标
offsetY鼠标相对于事件源左上角Y轴的坐标
  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值