关键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. springBoot api接口

    application/json 请求接口 @RequestMapping(value = "/getBaseData", method = RequestMethod.POST, ...

  2. 正确地使用GIT FORK

    摘自github官方网站,稍后我将抽空翻译. Fork a repo https://help.github.com/articles/fork-a-repo/ Syncing a fork http ...

  3. CRB and Candies LCM 性质

    题目 CRB and Candies 题意 \[ \text{给定正整数N,求} LCM \lbrace C \left(N , 0 \right),C\left(N , 1 \right),..., ...

  4. DiSC小记

    最近在单位进行管理培训时进行了一个DiSC的心理测试,DiSC是Dominance,influence,Steadiness和Conscientiousness四个英文单词的首字母缩写.这四个单词对应 ...

  5. (译)关于使用Eclipse Memory Analyzer的10点小技巧

    作者 Rave_Tian 2016.02.01 17:56* 字数 2988 阅读 520评论 0喜欢 0 分析和理解应用的内存使用情况是开发过程中一项不小的挑战.一个微小的逻辑错误可能会导致监听器没 ...

  6. ThinkPHP模板包含功能(转载)

    对于一些有共同属性的页面(如页脚),可以单独制作成一个模板,再利用 ThinkPHP 提供的模板包含功能包含进来.这样,当要修改这些公共页面时,只需修改对应的模板即可而不必修改每一个页面.模板的包含使 ...

  7. 2017.2.28 activiti实战--第七章--Spring容器集成应用实例（五）普通表单

    学习资料:<Activiti实战> 第七章  Spring容器集成应用实例(五)普通表单 第六章中介绍了动态表单.外置表单.这里讲解第三种表单:普通表单. 普通表单的特点: 把表单内容写在 ...

  8. 2016.7.12 去除mybatis-generator生成的class里的注释

    用mybatis-generator自动生成代码会出现很多没必要的注释.     在配置文件里加上: 是否去除所有自动生成的文件的时间戳: 是否去除所有自动生成文件的注释: <commentGe ...

  9. PHP树生成迷宫及A*自己主动寻路算法

    PHP树生成迷宫及A*自己主动寻路算法 迷宫算法是採用树的深度遍历原理.这样生成的迷宫相当的细,并且死胡同数量相对较少! 随意两点之间都存在唯一的一条通路. 至于A*寻路算法是最大众化的一全自己主动寻 ...

  10. jquery ajax传参数问题

    var fd = new FormData();//实例化表单,提交数据使用fd.append('imgUrl',imgUrl);//将files追加进去fd.append('typeId',type ...