关键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. CSU 1777: 大还是小？【模拟/后导0】

    293419 roniking 1777 Accepted 2032 0 C++ 2000 2018-04-03 19:21:25 Description 输入两个实数,判断第一个数大,第二个数大还是 ...

  2. SQLite中使用全文搜索FTS

    SQLite中使用全文搜索FTS   SQLite支持全文搜索.通过全文搜索功能,可以方便用户快速进行查找.在iOS中,GRDB.FMDB等SQLite框架均支持FTS技术,如FTS3.FTS4等.各 ...

  3. 2016集训测试赛（十九）Problem A: 24点大师

    Solution 这到题目有意思. 首先题目描述给我们提供了一种非常管用的模型. 按照题目的方法, 我们可以轻松用暴力解决20+的问题; 关键在于如何构造更大的情况: 我们发现 \[ [(n + n) ...

  4. org.apache.commons.io.Charsets

    requiredCharsets:由Java平台支持字符集对象标准名称,构造一个sorted map. public void test() { Map<String, Charset> ...

  5. 评分条RatingBar Android

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  6. eos智能合约执行流程

    eos智能合约执行 1. 执行流程 controller::push_transaction()  // 事务 -> transaction_context::exec()  // 事务 -&g ...

  7. The web application [/struts2_0100] created a ThreadLocal with key of type

    引用: 严重: The web application [/struts2_0100] created a ThreadLocal with key of type [com.opensymphony ...

  8. linux系统中毒排查学习记录

    linux有许多的版本,主要关注redhat(centos)和ubuntu这两个主流版本 以下命令基本都需要root权限,执行命令前记得加sudo 第一步 top,ps命令查看系统资源和负载情况,查看 ...

  9. c 数组做为形參时 该參数退化为指针

    当数组做为函数的形參的时候,该參数退化为指针,而且是无法直接求得数组的大小. 传数组给一个函数.数组类型自己主动转换为指针类型,因而传的实际是地址. void func(int array[10]) ...

  10. mootools客户端框架

    mootools客户端框架 学习:http://www.chinamootools.com/ 官网:https://mootools.net/ 下载地址: https://github.com/moo ...