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 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
jquery 插件学习(五)
Aug 06 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JavaScript错误处理
Feb 03 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Vue组件开发初探
Feb 14 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
js中的this的指向问题详解
Aug 29 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
新闻编辑自荐信
2013/11/03 职场文书
移动通信专业自荐信范文
2013/11/12 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014年保管员工作总结
2014/11/18 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年采购员工作总结
2015/04/27 职场文书
2015大一新生军训感言
2015/08/01 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Python采集股票数据并制作可视化柱状图
2022/04/04 Python