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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
javascript定时器取消定时器及优化方法
Jul 08 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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的ZIP压缩类分享
2014/05/04 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
Javascript中的数学函数
2007/04/04 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
jQuery设计思想
2017/03/07 Javascript
react build 后打包发布总结
2018/08/24 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python使用7z解压apk包的方法
2015/04/18 Python
Python中表示字符串的三种方法
2017/09/06 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
总裁助理岗位职责
2014/02/17 职场文书
销售岗位职责范本
2014/06/12 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
个人求职信格式范文
2015/03/20 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS