关键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. AC日记——还是01串 51nod 1396

    还是01串 思路: 前缀和: 来,上代码: #include <cstdio> #include <cstring> #include <iostream> #in ...

  2. Codechef Chef and Triangles(离散化+区间并集)

    题目链接 Chef and Triangles 先排序,然后得到$m - 1$个区间: $(a[2] - a[1], a[2] + a[1])$ $(a[3] - a[2], a[3] + a[2]) ...

  3. JMeter进行http接口测试

    Jmter工具设计之初是用于做性能测试的,它在实现对各种接口的调用方面已经做的比较成熟,因此,本次直接使用Jmeter工具来完成对Http接口的测试. 一.开发接口测试案例的整体方案: 第一步:我们要 ...

  4. Assembly.CreateInstance和Activator.CreateInstance

    本来是在设计模式中的工厂方法,在实现抽象工厂时,用到了一直都不熟悉的反射. namespace Factory { public abstract class Factory { public abs ...

  5. eos智能合约与主进程交互

    eos智能合约与主进程交互 1.启动wasm 参考eos智能合约执行流程.md 2.智能合约调用主进程api 如何实现wasm代码与eos宿主交互还需要摸索! 大致:在wasm_interface.c ...

  6. cocos2d-x 学习记录

    不积跬步,无以至千里.不积小流,无以成江海. 開始学习cocos2d-x ,路漫漫其修远兮.加油!

  7. overlay和overlay2的区别

    docker作为一个容器平台,它有一套自己的存储系统.它支持的driver有overlay,overlay2, aufs等等. 这篇文章主要分析overlay和overlay2的区别. overlay ...

  8. 2017.2.13 开涛shiro教程-第十二章-与Spring集成（二）shiro权限注解

    原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. 第十二章-与Spring集成(二)shiro权限注解 shiro注 ...

  9. linux中find的用法

    找所在目录的文件用 find -name “file*” -print  #注意不要用加文件路径,查找文件也好用双双引号括住: 也可以 find ./ -name “file*” -print

  10. Interleaving String——是否由两个string交叉、DP

    Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given:s1 = ...