简单谈谈offsetleft、offsetTop和offsetParent

 更新时间:2020-12-09 17:01:14   作者:佚名   我要评论(0)

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

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);
 }
}

到此这篇关于offsetleft、offsetTop和offsetParent的文章就介绍到这了,更多相关offsetleft、offsetTop和offsetParent内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • 获取offsetTop和offsetLeft值的js代码(兼容)
  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性
  • 获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
  • 详解 javascript中offsetleft属性的用法
  • javascript中style.left和offsetLeft的用法说明
  • clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
  • 浅析offsetLeft,Left,clientLeft之间的区别
  • JavaScript中style.left与offsetLeft的使用及区别详解
  • 谈谈对offsetleft兼容性的理解
  • window.setInterval()方法的定义和用法及offsetLeft与style.left的区别

相关文章

  • 简单谈谈offsetleft、offsetTop和offsetParent

    简单谈谈offsetleft、offsetTop和offsetParent

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

最新评论