关键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. DB2 With语句递归

    WITH T1 (T11 , T22 , T33 , T44) AS (SELECT TASKID , REPLY , ROWNUMBER () OVER (PARTITION BY TASKID) ...

  2. Java 获取指定日期的方法总结

    原文地址:http://bdcwl.blog.163.com/blog/static/765222652009104171521/ SimpleDateFormat sdf = new SimpleD ...

  3. ios开发小结之app发布升级

    在近两个月的开发中,遇到了挺多问题的,几天加班加点,最后还是在年前发布并更新了一个版本,欢迎下载无觅下载. 最头疼的问题是提交app审核,之前的工程不太规范,导致一些文件icon没有设置好,直接val ...

  4. eos wasm虚拟机相关接口定义实现

    wasm虚拟机相关接口定义实现 执行流程 controller::push_transaction()  // 事务 -> transaction_context::exec()  // 事务 ...

  5. flask的日志输出current_app.logger.debug

    环境部署方式:nginx+supervisord+gunicorn在/etc/supervisord.conf中配置日志的输出路径stdout_logfile=/home/admin/workspac ...

  6. struts2设置默认首页

    在默认情况下,我们一般希望.当我们在浏览器中输入127.0.0.1:8080/project_name时候跳到项目的首页,那么在struts中我们这么设置呢?光加上<default-action ...

  7. maven管理整理

    maven管理整理 学习了:https://www.imooc.com/learn/443 mvn -v 版本 compile 编译 test 测试 package 打包 clean 删除 insta ...

  8. 【LeetCode-面试算法经典-Java实现】【139-Word Break（单词拆分）】

    [139-Word Break(单词拆分)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a string s and a dictionary of w ...

  9. java把一个文件的内容复制到另外一个文件

    /** * java把一个文件的内容复制到另外一个文件 */import java.io.File;import java.io.FileInputStream;import java.io.File ...

  10. java jar包运行方法

    http://java-beginner-liyun.iteye.com/blog/736752一.怎么打jar包 第一步:选中要打jar包的工程 第二步:鼠标右击,选择Export... 第三步:选 ...