w3c规范，请戳这里：http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent

　　

　　一、offsetParent

　　英文解读：

　　part one：offsetParent作为一个元素属性并不是每一个元素都是值得拥有的，对于符合以下情况的元素是没有offsetParent这个属性的：

　　① 该元素没有css布局的盒子模型（我觉得这句话很难理解，有见识的人指教）；

　　② 该元素是根元素（关于这一点的理解在后续会解释，其实原因就是offsetParent是一个相对属性，就是要找个参照物）；

　　③ 该元素师html body元素；

　　④ 该元素的position属性为fixed；

　　part two: 对于offsetParent这个属性值又是怎么计算的呢？计算方法取决于该元素最近的祖先元素（注意不是单单父级元素喔）。应该按照以下条件逐个满足计算

　　① 相对祖先元素中position不是static的那个元素；

　　② 假如在根据条件①找不到的情况，则默认是<body>元素；

　　③ 虽然祖先元素的position是static，但是元素名字是td、th或者是table的，则可以等同于第①条

　　二、offsetTop

　　英文解读：

　　offsetLeft属性也不是每个元素都有的，其实更确切地讲应该是建立在offsetParent之上的,它要去找一个有offsetParent属性的祖先元素。

　　① 如果该元素是html body元素，或者是没有css布局，自然就没有offsetLeft的意义，offsetLeft的值会返回0并且终止该算法；

　　以下还有两点就是有关offsetLeft的计算问题：

　　① 对于所有祖先元素的offsetParent属性值为null的元素，该元素的offsetLeft的值是这么计算的：该值应该放在该元素的CSS布局模型下进行计算，为以上边框为边界相对于该元素初始包含块的位置，期间要忽略该元素和祖先元素的平移；

　　② 而存在祖先元素中存在具有offsetParent属性的元素，计算要依赖于最近的具有offsetParent属性的祖先元素，计算情况为：拥有offsetParent属性的祖先元素的padding-top，加上目标元素以上边框为边界相对于该元素初始包含块的位置（这就涉及到了margin-left），期间要忽略该元素和祖先元素的平移；

　　三、offsetLeft

　　英文解读：

　　参考offsetTop

　　　四、offsetWidth

　　英文解读：

　　offsetWidth为具有css布局元素的属性。该值得计算为：元素的边框、水平的padding、元素本身的width。

　　五、offsetHeight

　　英文解读：
　　offsetHeight可以参考offsetWidth进行定义。

　　offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

　　offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

　　offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)

　　offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)

　　

　　最后：附上博友详细分析计算的好文一枚 http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight的更多相关文章

  1. offsetleft、offsetTop、offsetParent的兼容性问题

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

  2. 简单理解offsetleft、offsetTop、offsetParent

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

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

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

  4. offsetTop、offsetLeft、offsetWidth、offsetHeight的用法

    假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...

  5. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  6. offsetWidth、offsetleft 等图文详解

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  7. 【JavaScript】全面解析offsetLeft、offsetTop

    假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...

  8. javaScript动画1 offsetWidth、offsetLeft

    offsetWidth和offsetHeight <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft

    document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clie ...

随机推荐

  1. SLF4J日志门面

    SLF4J官网:http://www.slf4j.org/ SLF4J的作用通俗点讲,就是可以让我们的项目以最小的代价更换不同的日志系统.无需修改代码,只需要添加.删除相应的jar包和配置文件. 1. ...

  2. 【Window】Tor（洋葱头路由）+Privoxy 网络实践（附带Java实例代码）

    1.背景 平时我们需要访问onion后缀的网站,需要通过Tor(The Onion Router,洋葱路由器).一般来说安装Tor Broswer就可以满足需要.但是项目我要做的是通过程序来获取oni ...

  3. DevExpress控件使用经验总结- GridView列表行号显示操作

    DevExpress是一个比较有名的界面控件套件,提供了一系列的界面控件套件的DotNet界面控件.本文主要介绍我在使用DevExpress控件过程中,遇到或者发现的一些问题解决方案,或者也可以所示一 ...

  4. 【转载】学习C#的28条建议

    1. 看得懂的书,请仔细看:看不懂的书,请硬着头皮看:2. 别指望看第一遍书就能记住和掌握什么——请看第二遍.第三遍:3. 学习编程的秘诀是:编程,编程,再编程:4. 请把书上的程序例子亲手输入到电脑 ...

  5. Python学习之静态页面数据抓取

    1 页面信息抓取 定义getPage函数,根据传入的页码get到整个页面的html内容 getContent函数,通过正则匹配把页面中的表格部分的html内容取出 最后定义getData函数,同样是通 ...

  6. [terry笔记]ora-00904 invalid identifier—同义词

    今天遇到一个问题,说起来也简单,但是困扰我半天. 升级数据库后,一个功能无法运行,在后台观察到其sql,发现sql中包含一个包执行不了,报错ora-00904 invalid identifier w ...

  7. JForum二次开发（一）

    1.环境 myeclipse2014,jdk7,tomcat8,mysql5.6 2.下载源码地址 http://jforum.net/download.jsp 3.导入源码 新建web工程JForu ...

  8. Python学习教程(learning Python)--2.2.2 Python全局和局部变量

    Python的变量也有全局和局部变量之分. 1. 局部变量 用在子函数里的变量称之为局部变量,其生命周期为该函数执行周期,即函数执行完后变量即不存在.由于局部变量和某个函数直接相关,故不同子函数里可以 ...

  9. 禁用DropDownList的Items

    可以先看看效果,被禁用的DropDownList的Items已经无法选取与颜色也变为灰色. 刚开始,DropDownList没有接收从网址传来的参数时,它每一个Item都是可以选取的,一旦接收了值.所 ...

  10. Linux下Nginx的安装与配置

    安装前需要安装pcre:ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/1.解压缩:     tar xjpf pcre-7.8.tar.b ...