×

认知offsetleft、offsetTop和offsetParent三者的意义

作者:qilongzhu2021.01.27来源:Web前端之家浏览:343评论:0
关键词:js

认知offsetleft、offsetTop和offsetParent三者的意义。

ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素

ele.offsetLeft和ele.offsetTop取值问题,分多种情况:

  • 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离

  • 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各浏览器返回值都是ele距离父元素左侧或者是
     顶部的距离(唯一的区别就是chrome没有把边框计算进去,IE,firefox都计算进去了)

  • 如果ele不是body的直接子元素,父元素也没有进行定位的情况下,各浏览器返回的直接是ele元素距body的距离

从上面可以看出offsetLeft、offsetTop返回的值就是ele到offsetParent的距离,这个offsetParent是什么元素要看ele的父元素有没有进行定位(relative、absolute)

应用:

在要获取元素距离网页左侧距离的时候就要考虑offsetParent的定位问题,不能简单的用ele.offsetLeft/Top获取,必须通过循环累加的方式才能获得正确值(chrome的结果和IE、Firefox不一样,相差1px,原因是chrome没有把边框计算进去),下面是代码

(Tips:代码中的this.left、this.top可以用arguments.callee代替,但根据ECMAScript 5规范不建议使用,strict model下已经被禁用,因为arguments是一个比较庞大的对象,非常耗资源)

var getOffset = {
 left:function(obj){
  return obj.offsetLeft + (obj.offsetParent ? this.left(obj.offsetParent) : 0);
 },
 top:function(){
  return obj.offsetTop + (obj.offsetParent ? this.top(obj.offsetParent) : 0);
 }
}

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20210127a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    Windows10要求电脑配置啊。...

  • ab234

    博主辛苦了,这个VUE分享很不错,收藏了。...

  • Web前端之家

    已加上...

  • 访客

    您好,我这边是http://www.liulanqi.com.cn/360/浏览器下载爱站权2,...

  • Web前端之家

    已加上...

  • WordPress主题

    已添加贵站友链网站名称:WordPress主题网站地址:https://www.bigethem...

  • jing35

    不可变数据类型...

  • aboy

    不错的flexbox教程,收藏。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria