getBoundingClientRect计算页面元素的offsetLeft、offsetTop
网上很流行的方法，不用框架时:
var posTop = 0, posLeft = 0;
do {
posTop += element.offsetTop || 0;
posLeft += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [posLeft, posTop];
}
firefox中到某些元素的offsetTop的值不对，反复测试发现和其父元素定位方式有关系，父元素用fixed定位，得到的offsetTop并没有加documentElement.scrollTop的值。如果documentElement有getBoundingClientRect方法，它用getBoundingClientRect去计算offset，要得到精确地offset就需要考虑元素是否表格单元格、父元素的position情况。
ff3.5 ie6以上 safari opera chrome都支持getBoundingClientRect方法，如果对兼容性要求不是很高可以用下面的代码
if ( !elem ) return {left:0, top:0};
var top = 0, left = 0;
if ( "getBoundingClientRect" in document.documentElement ){
//jquery方法
var box = elem.getBoundingClientRect(),
doc = elem.ownerDocument,
body = doc.body,
docElem = doc.documentElement,
clientTop = docElem.clientTop || body.clientTop || 0,
clientLeft = docElem.clientLeft || body.clientLeft || 0,
top = box.top + (self.pageYOffset || docElem && docElem.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || docElem && docElem.scrollLeft || body.scrollLeft) - clientLeft;
}else{
do{
top += elem.offsetTop || 0;
left += elem.offsetLeft || 0;
elem = elem.offsetParent;
} while (elem);
}
return {left:left, top:top};
}
计算时需要减去clientTop clientLeft，否则有时还是会差几个像素。
转载于:https://www.cnblogs.com/jenry/archive/2010/12/27/1917936.html
getBoundingClientRect计算页面元素的offsetLeft、offsetTop相关推荐
- JavaScript如何获取/计算页面元素的offset？
问题 通过点击一控件,在控件的下面显示一个浮动层,通常的做法是:获取此控件的offset值,再计算出浮动层的top,left等css属性的值,赋值即可. 那么下面就看一下如何获取控件的offset值 ...
- 理清offsetparent()、offsetLeft/offsetTop、offset()、position()
简而言之,它们的概念如下: ① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素. ② offsetLeft/offsetTop ...
- 用getBoundingClientRect()来获取页面元素的位置
以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0; do{ _x += el.offsetLeft; ...
- 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置
1.网页的大小和浏览器窗口的大小 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和 document元素的clientHeight和clientWidth属性,就代表了网页的大小. f ...
- js，jquery获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- 原生JS 实现页面元素的拖动 拖拽
1 . 实现原理 要实现页面元素的拖动,其原理就是根据鼠标的移动实时的更改元素的left 和 top值(当然元素肯定是要做绝对定位的),那么就达到我们要的效果了呀! 鼠标的位置是可以通过 e.clie ...
- Cypress之模拟键盘鼠标操作以及页面元素拖动操作
上篇文章讲解了使用cypress框架时,如何上传或者下载文件,以及定位操作iframe和shadow dom下的页面元素.此次课程将讲解如何模拟键盘输入.鼠标操作以及如何拖动页面元素,另外,会介绍如何 ...
最新文章
- 斯坦福李飞飞团队「最惨」在读博士：论文被拒，项目被砍，本文教你如何正视失败！...
- 红外发送管的角度特性测试
- WCF 第十二章 对等网
- 【NLP】深入理解word2vec
- JetBrains —— JetBrains系列IDE优化配置（提高启动和运行速度）
- IDEA快速生成构造器（构造函数）
- 【SpringBoot实战】员工部门管理页面，增删改查，含源码
- sam格式的结构和意义_各种格式的练字本，对写字真有帮助吗
- Cisco 3560 Qos限速配置
- Java开发笔记（一百三十二）Swing的表格
- Vue 仿网易云音乐 WebApp
- 物联网智能电影院- Android
- 屏幕录制软件有哪些？4款超好用录屏软件下载，强烈推荐
- STL库中常用的数据结构
- canvas系列 — canvas常用API介绍
- HFSS - 印刷偶极子天线设计与仿真
- 软件测试人员培养计划
- java持久化 seri_Java 的序列化 (Serialization) 教程
- ITSM正向浪涌测试仪
- 网页视频下载：怎么批量下载网页上的视频