CSS-offsetLeft,offsetTop,offsetWidth,offsetHeight

DOM元素的offsetTop属性值

obj.offsetTop:
obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型

obj.offsetLeft:
obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型

obj.offsetWidth:
obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型

obj.offsetHeight:
obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型

offsetParent :
当前对象的上级层对象.

一些注意事项
  1. 只有元素show(渲染完成)才会计算入offsetTop,若是中间有元素数据需要异步获取,会导致最终获取的offsetTop值偏小
  2. offsetTop返回的值就是ele到offsetParent的距离,这个offsetParent是什么元素要看ele的父元素有没有进行定位(relative、absolute)
  3. ele.offsetTop取值问题,分多种情况:
    如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离
    如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各浏览器返回值都是ele距离父元素左侧或者是顶部的距离(唯一的区别就是chrome没有把边框计算进去,IE,firefox都计算进去了)
    如果ele不是body的直接子元素,父元素也没有进行定位的情况下,各浏览器返回的直接是ele元素距body的距离
  4. 这个offsetParent指元素最近的有定位属性的上级元素,有两个特殊情况需要注意:
    当没有定位的元素,则 offsetParent 为最近的 table 元素对象或根元素;
    当元素的 style.display 设置为 “none” 时,offsetParent 返回 null
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值