[原]js获取dom元素的实际位置及相对坐标
关键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元素的实际位置及相对坐标的更多相关文章
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- JS获取DOM元素
1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...
- js获取dom元素的子元素,父元素,兄弟元素小记
原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
随机推荐
- Codeforces 731B Coupons and Discounts(贪心)
题目链接 Coupons and Discounts 逐步贪心即可. 若当前位为奇数则当前位的下一位减一,否则不动. #include <bits/stdc++.h> using name ...
- Codeforces 371E Subway Innovation (前缀和预处理应用)
题目链接 Subway Innovation 首先不难想到所求的k个点一定是连续的,那么假设先选最前面的k个点,然后在O(1)内判断第2个点到第k+1个点这k个点哪个更优. 判断的时候用detla[i ...
- 转:IAdaptable & IAdapterFactory
IAdaptable & IAdapterFactory在Eclipse中使用IAdaptable接口的方式有两种 在Eclipse中使用IAdaptable接口的方式有两种1:某个类希望提供 ...
- apache mina框架
http://blog.csdn.net/ljx8928358/article/details/7759024
- CI框架基础知识
调用一个视图 a.调用一个视图 $this->load->view('视图文件名'); b.调用多个视图 $this->load->view('index_h'); $this ...
- 《C++编程思想》第二章 数 据 抽 象(原书代码+习题+答案)
相关代码例如以下: 1. <span style="font-size:18px;">/*声明与定义的差别*/ #include <iostream> us ...
- Dicom Conformance
Platform Compatibility of DICOM Transfer Syntax 1.2.840.10008.1.2 Implicit VR - Little Endian yes ...
- TestCodis的工具代码
关于redis的操作demo代码如下: import java.util.HashMap; import java.util.Iterator; import java.util.List; impo ...
- Maven项目如何将自定义文件添加到META-INF目录下
Maven项目如何将自定义文件添加到META-INF目录下 学习了:https://blog.csdn.net/yangjiegreat/article/details/78698655 <bu ...
- 16. Spring Boot使用Druid(编程注入)【从零开始学Spring Boot】
转载:http://blog.csdn.net/linxingliang/article/details/52001744 在上一节使用是配置文件的方式进行使用druid,这里在扩散下使用编程式进行使 ...