做为走上前端不归路的我，以前只是认为offsetTop是元素的左边框至包含元素offsetParent的左内边框之间的像素距离，同理offsetRight是相对于上内边框。那么问题来了，包含元素offsetParent究竟是谁呢？

是我太天真还是天后知后觉！

其实：

页面中的元素的offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算。例如:

<style type="text/css">

    .box1{

        width: 100px;

        height: 100px;

        background: red;

    }

    #box2{

        width: 50px;

        height: 50px;

        background: green;

        margin: 0 auto;

    }

    </style>

    <div class="box1">

        <div id="box2">

        </div>

    </div>

    <script type="text/javascript">

    var box2 = document.getElementById('box2');

    alert(box2.offsetParent.tagName);//输出BODY

    alert(box2.offsetLeft);//输出从33

    </script>

此时id为box2的div元素的祖先元素中没有已经定位的元素，所以box2的offsetLeft是相对于body元素计算所得的。

下面我们将上面的代码做如下修改

<style type="text/css">

    .box1{

        width: 100px;

        height: 100px;

        background: red;

        position:relative;

    }

    #box2{

        width: 50px;

        height: 50px;

        background: green;

        margin: 0 auto;

    }

    </style>

    <div class="box1">

        <div id="box2">

        </div>

    </div>

    <script type="text/javascript">

    var box2 = document.getElementById('box2');

    alert(box2.offsetParent.tagName);//输出DIV

    alert(box2.offsetLeft);//输出从25

    </script>

offsetTop同理。

通过查阅资料我还发现 IE6,IE7 对offsetParent解释有BUG，当祖先元素都不是定位元素且本身是定位元素的时候返回document.documentElement，其他情况终返回document.body：

<body>

    <div id="b" style="position:relative">

        <div id="a"></div>

    </div><!-- a.offsetParent返回b -->

　   <div id="d">

　　　　　<div id="c"></div>

　   </div><!-- c.offsetParent返回document.body -->

    <div id="f">

        <div id="e" style="position:relative"></div>

    </div><!-- e.fsetParent返回document.body 在ie6,ie7中返回document.documentElement -->

</body>

深入理解offsetTop与offsetLeft的更多相关文章

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

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

  2. 获取到body的offsetTop和offsetLeft值

    function offsetTL(obj){//获取到body的offsetTop和offsetLeft var t=0,l=0; while(obj){ t=t+obj.offsetTop; l= ...

  3. offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight

    w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...

  4. 扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解

    先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class=" ...

  5. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  6. JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解

    scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到 ...

  7. js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

    之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth ...

  8. clientTop、offsetTop和scrollTop的区分

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

  9. offsetLeft,Left,clientLeft的区别

    offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...

随机推荐

  1. bzoj2818

    我们先穷举素数p然后令y>x 这样问题就是求这个gcd(x,y)=p  (1<=x<y=n)不难发现必须y=kp k∈N* 当y=p时,易知个数为φ(1)当y=2p 个数为φ(2), ...

  2. C语言变量的理解

    1.定义: 变量是一段有名字的连续存储空间.在源代码中通过定义变量来申请并命名这样的存储空间,并通过变量的名字来使用这段存储空间.下面,我们来理解怎样定义一个变量.例如去住酒店.第一步,前台登记:住几 ...

  3. cf602B Approximating a Constant Range

    B. Approximating a Constant Range time limit per test 2 seconds memory limit per test 256 megabytes ...

  4. 数据结构典型算法的VC实现（袁辉勇）

    1. 迷宫问题求解 #include <stdio.h> #define m 8 //迷宫内有8列 #define n 8 //迷宫内有8行 #define MAXSIZE 100//栈尺 ...

  5. 九度online judge 1543 二叉树

    题目1543:无限完全二叉树的层次遍历 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:389 解决:54 题目描述: 有一棵无限完全二叉树,他的根节点是1/1,且任意一个节点p/q的左儿 ...

  6. 全情投入是做好工作的基础——Leo鉴书39

    很多人都有:“内向的人则不擅长社交,只能会活得很封闭”的思想,于是不少内向的朋友要么认为只有扭曲自己的性格变得外向才能在社会上吃得开,才能很爽的行走职场:要么就决定完全封闭自己活在孤独之中,其实以上两 ...

  7. 删除表中多余的重复记录（多个字段），只留有rowid最小的记录

    假如表Users,其中ID为自增长. ID,Name,Sex 1 张三,男 2 张三,男 3 李四,女 4 李四,女 5 王五,男 --查找出最小行号ID的重复记录 select Name,Sex,C ...

  8. ASP.NET 防盗链的实现[HttpHandler]

    本文转载:http://www.cnblogs.com/eflylab/archive/2008/06/16/1223373.html 有时我们需要防止其他网站直接引用我们系统中的图片,或下载文件链接 ...

  9. select默认选择的实现方法

    <script type="text/javascript"> <!-- document.biao.bbb.value = "云南";//b ...

  10. RHCE 基础学习

    http://lizhenliang.blog.51cto.com/7876557/d-8