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实现计算代码行数的简单方法附代码
Aug 13 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
javascript进阶篇深拷贝实现的四种方式
Jul 07 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操作文件方法问答
2007/03/16 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
javascript json2 使用方法
2010/03/16 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
itchat接口使用示例
2017/10/23 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
详解Python的循环结构知识点
2019/05/20 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
自荐信的格式
2014/03/10 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
市级三好生竞选稿
2015/11/21 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
手把手教你导入Go语言第三方库
2021/08/04 Golang