js获取元素在浏览器中的绝对位置


Posted in Javascript onJuly 24, 2010

JavaScript中提供获取HTML元素位置的属性:

HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,可以用以下函数:

//获取元素的纵坐标 
function getTop(e){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 
} 
//获取元素的横坐标 
function getLeft(e){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 
}

其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。
Javascript 相关文章推荐
javascript日期计算实例分析
Jun 29 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
ng-alain表单使用方式详解
Jul 10 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
几个有趣的Javascript Hack
Jul 24 #Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 #Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 #Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 #Javascript
aspx中利用js实现确认删除代码
Jul 22 #Javascript
JS实现self的resend
Jul 22 #Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 #Javascript
You might like
php 分页原理详解
2009/08/21 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
vue.js的安装方法
2017/05/12 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python操作串口的方法
2015/06/17 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
浅谈Python中的模块
2020/06/10 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
大学生专科学习生活的自我评价
2013/12/07 职场文书
初中生自我鉴定
2014/02/04 职场文书
广告业务员岗位职责
2014/02/06 职场文书
社团活动总结书
2014/06/27 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
2016春节家属慰问信
2015/03/25 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
Python Pygame实战之塔防游戏的实现
2022/03/17 Python