用getBoundingClientRect()来获取页面元素的位置

以前绝大多数的使用下面的代码来获取页面元素的位置：

[code=”javascript”]var _x = 0, _y = 0;
do{
_x += el.offsetLeft;
_y += el.offsetTop;
}while(el=el.offsetParent);
return {x:_x,y:_y};[/code]

这里有个”offsetParent”问题，所以要写很多兼容的代码，经过不懈的查找终于找到getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object，该对象有是个属性：top，left，right，bottom；这里的top、left和css中的理解很相似，但是right，bottom和css中的理解有点不一样，看示意图：

以前getBoundingClientRect()是IE特有的，目前FF3+，opera9.5+，safari 4，都已经支持这个方法。

可以滚动滚动条之后点红色区域看各个值的变化：

有了这个方法，获取页面元素的位置就简单多了，

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

转载于:https://www.cnblogs.com/h5monkey/p/6045912.html

用getBoundingClientRect()来获取页面元素的位置相关推荐

获取html元素的位置,如何获取页面元素的位置
背景:最近在商品列表项目迭代中,需要在商品列表底部增加一个分销商品广告位,另外接收到一个产品曝光度的埋点需求,需要知道产品出现在用户视口后在进行数据统计! 基于虚拟 DOM 数据驱动的思想,最不提倡的 ...
用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的 ...
vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置
1.网页的大小和浏览器窗口的大小一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和 document元素的clientHeight和clientWidth属性,就代表了网页的大小. f ...
java 获取页面元素的位置_Selenium Java 页面元素定位2
一.操作目的 1.1 自动化测试常用操作 1.定位网页上的元素,并存储到一个变量中: 2.对变量进行操作,比如点击或输入文字: 3.设定页面元素的操作值: 二.定位方法汇总 2.1 findEleme ...
使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素然后:secti ...
[html] 精确获取页面元素位置的方式有哪些？
[html] 精确获取页面元素位置的方式有哪些? let btn = document.querySelector('#ele') let {top, left} = getComputedStyle ...
获取页面元素的滚动位置，兼容各浏览器
/***获取页面元素的滚动位置@param {DOM} el Dom元素*return {Object} 元素滚动位置对象*/function getScroll (el) {var d = el,d ...
js，jquery获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
使用Selenium含蓄等待获取页面元素（附带实际业务需求情景）
Hello,大家好,又到了小猿分享技术的时间了.这回带来的是使用Selenium去网站上获取部分信息并且执行部分操作以及"含蓄"等待元素加载完成以及截取图片和网页刷新机制的技术点. ...

用getBoundingClientRect()来获取页面元素的位置

用getBoundingClientRect()来获取页面元素的位置相关推荐

最新文章

热门文章