关于offsetParent

不知道有多少人知道JavaScript中有offsetParent这么个属性。

关于offsetParent，我最开始见到他，是在《JavaScript高级程序设计（第3版）》第321页，介绍元素大小—偏移量，引申出来的。看一下具体内容：

offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。

offsetParent属性不一定与parentNode的值相等。

例如：td元素的offsetParent是作为其祖先元素的table元素，因为table是在DOM层次中距td最近的一个具有大小的元素。

我的第一反应，也就是大多数情况下，offsetParent与parentNode是相等的，为了验证收结果，特意写了个demo来进行测试，其实主要的目的是测试offsetLeft和offsetTop的，offsetParent只能说是个顺带产品。

    <div class="closest">

        <div class="pr">

            <div id="test">offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。</div>

        </div>

    </div>

当然，是没有写任何css的。

var current = document.querySelector("#test");

console.log(current.offsetLeft, current.offsetParent)

当我打开控制台，查看结果时：发现了一个令人尴尬无比的结果，current.offsetParent居然返回了body，苍天啊，你怎么就返回body了？

不得已，去到MDN查询一下吧！

原来是“定位元素”，这才是结果吧！

也就是说，他沿着当前元素，向祖先元素查找，一直找到一个position属性有定义，并且不为static的祖先元素。

注意事项：1、如果当前元素或者其祖先元素，有设置属性:display:none;则offsetParent返回null。

2、如果当前元素有设置属性: position:fixed也返回null。

既然能够明白offsetParent了，当然就顺带引申出了一个小需求：获取当前元素，距离页面顶部（左侧）的距离。

那我们就来做一个简单的封装吧！

    function getElemOffset(elem) {

            var offset = {

                left: elem.offsetLeft,

                top: elem.offsetTop

            }

            var parent = elem.offsetParent;

            while (parent != null) {

                offset.left += parent.offsetLeft;

                offset.top += parent.offsetTop;

                parent = parent.offsetParent;

            }

            return offset;

        }

调用的时候，直接将当前元素当做参数传入getElemOffset即可。

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px 'Helvetica Neue'; color: #000000; -webkit-text-stroke: #000000; background-color: #ffffff}
span.s1 {font-kerning: none}