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 相关文章推荐
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
Apr 20 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php+mysql 实现身份验证代码
2010/03/24 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP递归算法的简单实例
2019/02/28 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
python中List的sort方法指南
2014/09/01 Python
Python之reload流程实例代码解析
2018/01/29 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
会计与出纳自荐书范文
2014/03/16 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
公司安全管理制度范本
2015/08/05 职场文书
旷工检讨书大全
2015/08/15 职场文书
python pyhs2 的安装操作
2021/04/07 Python
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技