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,

}

(.)

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

html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: <button id="box" onclick="pop_box()">弹出框< ...
php获取一个文件名的函数,PHP 文件系统函数之获取文件名及文件名后缀-php文件...
获取文件名(包含扩展): 1.用PHP 文件函数 basename获取例: $filename = "/home/httpd/html/index.php"; $file = b ...
怎么获取一个类型的所有字段的名字和获取给予数据相应的值
下面的代码你只要注意怎么样获取字段名和相应数据的值就OK了其它的就不要管 View Code public FlexiGridData GetFlexiGridData<T>(Page ...
angularjs获取上一个元素的id_DOM(1)-DOM概念和获取元素
1. 概念 JavaScript共有三部分组成:ECMAScript.DOM.BOM,其中DOM和BOM成为Web API,可以被包括ECMAScript在内的Web编程语言使用,现在就来开始学习DO ...
微信小程序根据wx.getSystemInfo获取屏幕尺寸，并动态改变元素宽高尺寸，示例
通过js获取屏幕尺寸,并改变元素尺寸效果图 index.wxml <view class="body-view" style="width:{{wWidth}}r ...
php获取div高度,JS获取一个未知DIV高度的方法
本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如:var height = element.clientH ...
java map 随机取值_随机获取一个集合（List, Set）中的元素，随机获取一个Map中的key或value...
利用Java提供的Random类.从List或Set中随机取出一个元素,从Map中随机获取一个key或value. 因为Set没有提供get(int index)方法,仅仅能先获取一个随机数后.利用一 ...
js获取一个月份最大天数和获取月的最后一天
代码如下: <html xmlns=http://www.w3.org/1999/xhtml > <head> <title>标题页</tit ...

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

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

最新文章

热门文章