关键API：

Element.getBoundingClientRect()

mdn：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

用法：

var rect = element.getBoundingClientRect();

console.log(rect.top, rect.right, rect.bottom, rect.left);

获取相对位置：

var bodyRect = document.body.getBoundingClientRect(),

    elemRect = element.getBoundingClientRect(),

    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

参考网址：http://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element

我只是个搬运工，一起学习了~

[原]js获取dom元素的实际位置及相对坐标的更多相关文章

  1. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  4. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

  5. JS获取DOM元素

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  6. js获取dom元素的子元素,父元素,兄弟元素小记

    原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...

  7. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  8. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  9. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

随机推荐

  1. Codeforces Gym100735 I.Yet another A + B-Java大数 (KTU Programming Camp (Day 1) Lithuania, Birˇstonas, August 19, 2015)

    I.Yet another A + B You are given three numbers. Is there a way to replace variables A, B and C with ...

  2. Codeforces Round #450 (Div. 2) B. Position in Fraction【数论/循环节/给定分子m 分母n和一个数c，找出c在m/n的循环节第几个位置出现，没出现过输出-1】

    B. Position in Fraction time limit per test 1 second memory limit per test 256 megabytes input stand ...

  3. BZOJ 3672 NOI 2014 购票

    题面 Description 今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会. 全国的城市构成了一棵以SZ市为根的有根树,每个城市 ...

  4. Topshelf+Quartz.net+Dapper+Npoi（一）

    背景 前段时间公司有个需求(每天给业务导出一批数据,以excel的形式通过邮件发送给他).A说:直接写个服务,判断等于某个时间点,执行一下sql语句,生成excel,写个EmaiHelper发送给他不 ...

  5. SELinux下更改mysql端口

    默认情况下 mysql更改端口后是不能通过selinux的 提示启动错误,那么首先就要看mysql的错误日志 可是我不知道mysql错误日志的位置 首先,更改selinux的模式为passive 然后 ...

  6. Windows 远程桌面文件传输的方法

    实现电脑的远程连接以后,很多时候会需要进行主机间的文件传输,这个时候就可以用系统自带的远程连接里的磁盘映射来完成,详细如下: 远程桌面程序内置了映射磁盘的功能,通过这个功能可以实现远程登录服务器时自动 ...

  7. asp.net怎样解决高并发问题

    队列+多线程+couchbase缓存 ,解决高并发问题. using System; using System.Collections.Generic; using System.Linq; usin ...

  8. String、Stringbuffer和Stringbuilder之间的区别

    关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.在执行速度方面:Stringbuilder>Stringbuffer&g ...

  9. 【转】.net 经典面试题

    [转].net 经典面试题  1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问.  ...

  10. 【IntelliJ IDEA】1.安装使用IntelliJ IDEA

    IntelliJ IDEA,初次接触,被赞许的收费版IDE环境. =================================================================== ...