码迷,mamicode.com
首页 > 其他好文 > 详细

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

时间:2018-10-29 15:59:58      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:页面   alt   距离   clientx   http   包括   border   get   导致   

一、clientX和clientY

  事件发生时,鼠标距离浏览器的可视区域的X、Y轴的位置,不包含滚动条的区域的部分。就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的。

二、offsetLeft和offsetTop

  事件源元素相对于父节点的偏移的像素值。

技术分享图片

三、offsetWidth和offsetHeight

  获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的。

四、clientWidth和clientHeight

  获取的是元素实际的内容宽度,不包含border,padding,内容宽度,以及滚动条的宽度。

五、scrollTop和scrollHeight

  scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数

  scrollHeight是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容

  scrollHeight = scrollTop + clientHeight

 

技术分享图片

 

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

标签:页面   alt   距离   clientx   http   包括   border   get   导致   

原文地址:https://www.cnblogs.com/llcdxh/p/9802634.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!