js获取元素到文档区域document的(横向、纵向)坐标的两种方法


Posted in Javascript onMay 17, 2013

获取页面中元素到文档区域document的横向、纵向坐标的两种方法及其比较
在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法:

一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现
在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素。所以,要得到元素到文档区域的坐标位置,只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止。
js代码

// 获取元素到文档区域的坐标 
function getPosition(element) { 
var actualLeft = element.offsetLeft, 
actualTop = element.offsetTop, 
current = element.offsetParent; // 取得元素的offsetParent 
// 一直循环直到根元素 
while (current !== null) { 
actualLeft += current.offsetLeft; 
actualTop += current.offsetTop; 
current = current.offsetParent; 
} 
// 返回包含left、top坐标的对象 
return { 
left: actualLeft, 
top: actualTop 
}; 
}

例子截图

js获取元素到文档区域document的(横向、纵向)坐标的两种方法 
firebug下测试结果截图:(注:其他浏览器已通过测试!)

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

二:通过 getBoundingClientRect() 方法实现
getBoundingClientRect方法用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗window的位置。返回的是一个对象,该对象有四个属性:top,left,right,bottom;该方法原本是IE Only的,但是FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率有很大的提高。 另外,该方法避免使用while循环,而是直接获取数值来实现,比第一种方法性能要好,特别是在复杂的页面上更为明显。
js代码

// 获取元素到文档区域的坐标 
function getPosition(element){ 
var dc = document, 
rec = element.getBoundingClientRect(), 
_x = rec.left, // 获取元素相对浏览器视窗window的左、上坐标 
_y = rec.top; 
// 与html或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置 
_x += dc.documentElement.scrollLeft || dc.body.scrollLeft; 
_y += dc.documentElement.scrollTop || dc.body.scrollTop; 
return { 
left: _x, 
top: _y 
}; 
}

经测试,该方法与第一种方法获取元素相对于document的坐标大小相同,对于IE低版本浏览器,存在一些差异。

注意:记得要累加上html(IE除外)或body(针对IE)元素的水平或垂直滚动距离!
结语:上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述,如遇到相关问题,可联系本人或直接发表评论,另外,对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小和元素本身的宽度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可,当然offsetWidth、offsetHeight属性会计算元素的内边距、边框,所以最好的办法还是通过getBoundingClientRect方法来获取。ps:补充一点,利用该方法返回对象的right-left = 元素宽度;bottom-top = 元素高度。可以获取不带边框的元素本身的宽度和高度。

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 #Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 #Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 #Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 #Javascript
extjs ColumnChart设置不同的颜色实现代码
May 17 #Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 #Javascript
javascript检测页面是否缩放的小例子
May 16 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
一个简单的MySQL数据浏览器
2006/10/09 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
php strftime函数的详细用法
2018/06/21 PHP
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
详解python3实现的web端json通信协议
2016/12/29 Python
python读取各种文件数据方法解析
2018/12/29 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
How TDD works
2012/09/30 面试题
结婚喜宴主持词
2014/03/14 职场文书
六年级学生评语大全
2014/12/26 职场文书
中学总务处工作总结
2015/08/12 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫