关键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. HDU1086 You can Solve a Geometry Problem too(计算几何)

    You can Solve a Geometry Problem too                                         Time Limit: 2000/1000 M ...

  2. codevs——2841 愤怒的LJF（背包）

    样例有误!  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description LJF发现ZPC的积分比他高,他很愤怒. 他挤出T ...

  3. Network| ICMP

    Internet Control Message Protocol,ICMP是网路协议族的核心协议之一.它用于TCP/IP网络中发送控制消息,提供可能发生在通信环境中的各种问题反馈,通过这些信息,令管 ...

  4. luogu P1314 聪明的质监员

    题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...

  5. mac下virtualenv使用

    1  sudo pip install virtualenv 安装 2 找一合适目录装虚拟环境 virtualenv virzhongguo 3  激活虚拟环境 source virzhongguo/ ...

  6. java基础篇4之注解

    1 注解的应用(jdk1.5的新特性) 一个注解相当于一个特殊的类 例子: @SuppressWarning("deprecation") @Deprecated @Overrid ...

  7. PhoneNumber

    项目地址:PhoneNumber 简介:一个获取号码归属地和其他信息(诈骗.骚扰等)的开源库   一个获取号码归属地和其他信息(诈骗.骚扰等)的开源库.支持本地离线(含归属地.骚扰.常用号码)和网络( ...

  8. spring(16)------spring的数据源配置

    在spring中,通过XML的形式实现数据源的注入有三种形式. 一.使用spring自带的DriverManagerDataSource 使用DriverManagerDataSource配置数据源与 ...

  9. [ACM] HDU 5024 Wang Xifeng&#39;s Little Plot （构造，枚举）

    Wang Xifeng's Little Plot Problem Description <Dream of the Red Chamber>(also <The Story of ...

  10. 利用MFC里面格式化函数也可以实现可变长度的问题

    直接粘代码: 1: CString str1;  //定义两个MFC里面的CString里面的字符串 2: CString str2; 3: str1.Format("(%d)", ...