简单谈谈offsetleft、offsetTop和offsetParent

更新时间：2020年12月04日 10:23:33 作者：expworld

这篇文章主要给大家介绍了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);
 }
}

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

您可能感兴趣的文章:

基于JS实现table导出Excel并保留样式
这篇文章主要介绍了基于JS实现table导出Excel并保留样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
基于layui实现登录页面
这篇文章主要为大家详细介绍了基于layui实现登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
fullpage.js全屏滚动的具体使用方法
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，本文主要介绍了fullpage.js全屏滚动的具体使用方法，感兴趣的可以了解一下
2021-09-09
JavaScript日期工具类DateUtils定义与用法示例
这篇文章主要介绍了JavaScript日期工具类DateUtils定义与用法,涉及javascript针对日期时间的获取、转换、比较、运算等相关操作技巧,需要的朋友可以参考下
2018-09-09
浅析TypeScript中的类型检查与错误捕获
类型检查是一种静态分析的过程，用于验证变量、函数和表达式的类型是否符合预期，这篇文章主要来和大家聊聊TypeScript中类型检查与错误捕获的相关知识，希望对大家有所帮助
2023-06-06
javascript中this用法实例详解
这篇文章主要介绍了javascript中this用法,结合具体实例形式详细分析了javascript中this的含义及对象、函数等各种调用中的使用技巧,需要的朋友可以参考下
2017-04-04
一步步教你实现微信小程序自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主要给大家介绍了关于微信小程序自定义组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
Bootstrap源码解读标签、徽章、缩略图和警示框（8）
这篇文章主要源码解读了标签、徽章、缩略图和警示框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JavaScript实现矩形块大小任意缩放
这篇文章主要为大家详细介绍了JavaScript实现矩形块大小任意缩放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JavaScript内置对象math,global功能与用法实例分析
这篇文章主要介绍了JavaScript内置对象math,global功能与用法,结合实例形式分析了javascript中内置对象math与global的基本概念、功能及使用方法,需要的朋友可以参考下
2019-06-06