js获取元素div相对body的距离

js获取元素div相对body的距离

jazwoo

于 2012-08-15 22:50:49 发布

阅读量1.7w
 收藏 6

点赞数 4
分类专栏： js/ajax 文章标签： div html opera firefox ie 浏览器
版权

js/ajax
专栏收录该内容
94 篇文章1 订阅
订阅专栏
如何取到页面中任意某个Html元素与body元素之间的偏移距离？

offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异：
IE5.0+ 、Opera8.0+：　offsetTop和offsetLeft 都是相对父级元素
Firefox1.06： offsetTop和offsetLeft 都是相对于body元素

因此：
（1）在FF下直接使用offsetTop和offsetLeft，就可以取到页面中任意某个Html元素与body元素之间的偏移距离；
（2）在IE、Opera下则比较麻烦：
需要首先取到该Html元素与body元素之间所有Html元素，计算各自的offsetTop和offsetLeft，然后再累加。
即：从该Html元素开始，遍历至body，在遍历的过程中，如果某个HTML元素的CSS设置了borderWidth的话，则borderWidth不是算在offsetTop和offsetLeft内的－－因此在遍历的过程中，还需要累加上：
obj.currentStyle.borderLeftWidth、obj.currentStyle.borderTopWidth
function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
    var t = obj.offsetTop; //获取该元素对应父容器的上边距
    var l = obj.offsetLeft; //对应父容器的上边距
    //判断是否有父容器，如果存在则累加其边距
    while (obj = obj.offsetParent) {//等效 obj = obj.offsetParent;while (obj != undefined)
        t += obj.offsetTop; //叠加父容器的上边距
        l += obj.offsetLeft; //叠加父容器的左边距
    }
    alert("top: " + t + " left: " + l);
}

————————————————
版权声明：本文为CSDN博主「jazwoo」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jazywoo123/article/details/7871151