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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
原生js实现购物车功能
Sep 23 Javascript
微信小程序canvas动态时钟
Oct 22 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
Javascript开发包大全整理
2006/12/22 Javascript
js确定对象类型方法
2012/03/30 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
python求众数问题实例
2014/09/26 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python switch 实现多分支选择功能
2020/12/21 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
计算机售后服务承诺书
2014/05/30 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
Python破解极验滑动验证码详细步骤
2021/05/21 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python