开发过程中经常会遇到 获取元素到屏幕左上角的距离, 当我们使用jQuery开发时,我们可以使用 $.offset()来获取准确的距离。
如果我们的项目中并没有引入jQuer的话,跟希望通过原生方法实现,此时我们使用 offetLeft/offetTop 或者clientLift/clientTop 其实都不能准确的获取这个距离,这个时候最好就是看看jQ怎么写的,为什么它就能够准确的获取到呢?这就要从$.offset() 源码看起了。
jQuery对于此功能的实现, 源码是这样写的:
jQuery.fn.offset = function( options ) { if ( arguments.length ) { return options === undefined ? this : this.each(function( i ) { jQuery.offset.setOffset( this, options, i ); }); } var docElem, win, elem = this[ 0 ], box = { top: 0, left: 0 }, doc = elem && elem.ownerDocument; if ( !doc ) { return; } docElem = doc.documentElement; // Make sure it\'s not a disconnected DOM node if ( !jQuery.contains( docElem, elem ) ) { return box; } // If we don\'t have gBCR, just use 0,0 rather than error // BlackBerry 5, iOS 3 (original iPhone) if ( typeof elem.getBoundingClientRect !== core_strundefined ) { box = elem.getBoundingClientRect(); } win = getWindow( doc ); return { top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft }; };
可以看到,实现此功能的核心代码是: element.getBoundingClientRect 方法,
从名字上就可以看出,意思就是获取屏幕边界,与该元素相关的CSS 边框集合。
内容截图如下:
值得一提的是,该方法下 没有内容的边框会被忽略。
想要获取元素到屏幕左上角距离 可以使用如下方法
var div1 = document.getElementById(\'div1\'); var domRect = { offsetLeft: div1.getBoundingClientRect().left, offsetTop: div1.getBoundingClientRect().top, }
(.)