关于offsetParent

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

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

offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。
offsetParent属性不一定与parentNode的值相等。
例如：td元素的offsetParent是作为其祖先元素的table元素，因为table是在DOM层次中距td最近的一个具有大小的元素。

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

    

        

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

　　当然，是没有写任何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即可。

 

　　

 

　　

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/10329842.html