jQuery position() 源码解读

position的代码比较简单。。。

    position: function() {
        if ( !this[ 0 ] ) {
            return;
        }

        var offsetParent, offset,
            elem = this[ 0 ],
            parentOffset = { top: 0, left: 0 };

        // Fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is its only offset parent
        if ( jQuery.css( elem, "position" ) === "fixed" ) {
            // Assume getBoundingClientRect is there when computed position is fixed
            offset = elem.getBoundingClientRect();

        } else {
            // Get *real* offsetParent
            offsetParent = this.offsetParent();

            // Get correct offsets
            offset = this.offset();
            if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
                parentOffset = offsetParent.offset();
            }

            // Add offsetParent borders
            parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
            parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
        }

        // Subtract parent offsets and element margins
        return {
            top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ),
            left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true )
        };
    }

如果当前元素是固定定位,可以直接使用getBoundingClientRect()方法获取其相对于视口的位置。

如果不是固定定位,这时候我们首先需要获取自身的offset,然后找到最近的有定位的父元素,来获取这个父元素的offset

因为position求的是元素相对于最近的有定位的父元素的位置

所以,你需要根据当前元素的offset-父元素的offset-负元素的边框-当前元素的外边距来获取

 

有一个疑问就是为什么要去排除margin的距离,看了几篇文章,说是position是类似把元素当初一个有定位的元素来处理,这样的话,确实可以理解的通,那么,此时position.left position.top 就相当于css中的left 和 top ?

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。