js怎么获取一个元素与屏幕右边的距离_js获取元素到屏幕左上角的距离

开发过程中经常会遇到 获取元素到屏幕左上角的距离， 当我们使用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 );

});

}vardocElem, 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 ) ) {returnbox;

}//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,

}

(.)