关键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. 【转载】SQL Server XML Path

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  2. Block为什么使用Copy?

    block:本质就是一个object-c对象block:存储位置,可能分为3个地方:代码去,堆区.栈区(ARC情况下会自动拷贝到堆区,因此ARC下只能有两个地方:代码去.堆区)代码区:不访问栈区的变量 ...

  3. Linux和Cisco命令行通用快捷键。

    Ctrl a e 行首,行尾(ahead,end)Esc f b 单词首,单词尾Ctrl f b 移动光标(forward,backwards) Ctrl u k 剪切光标前所有,剪切光标后所有Ctr ...

  4. FZU 1057 a^b 【数论/九余定理】

    Accept: 1164    Submit: 3722Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Description 对于任 ...

  5. Vue中this.$router.push参数获取

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...

  6. Springboot如何优雅的解决ajax+自定义headers的跨域请求

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...

  7. codeigniter 使用

    CodeIgniter系列 记录count和分页 对于某个表的不带条件的count,可以简单的用 $total = $this->db->count_all($table_name) 来获 ...

  8. 排序算法之高速排序(Java)

    //高速排序 public class Quick_Sort { // 排序的主要算法 private int Partition(int[] data, int start, int end) { ...

  9. 2017.04.20 Adams仿真介绍

    Adams 仿真 | 验证"隐性机器人模型"概念,提高视觉伺服精度 产品:Adams行业:科研优势: 1.Adams 仿真可精确预测机器人的位置和方位 2.仿真在理论工作验证中起着 ...

  10. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第15章节--开发SP2013工作流应用程序

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第15章节--开发SP2013工作流应用程序         本章节你将学到: SP中工作流的新功能: 理解工作流管理服务 ...