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代码
Mar 10 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
js实现日历的简单算法
Jan 24 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
js实现整体缩放页面适配移动端
Mar 31 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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php删除数组元素示例分享
2014/02/17 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
django缓存配置的几种方法详解
2018/07/16 Python
Python多进程原理与用法分析
2018/08/21 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
中国世界遗产导游词
2015/02/13 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2019广播稿怎么写
2019/04/17 职场文书
使用pytorch实现线性回归
2021/04/11 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle