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


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,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。



相关阅读:
CSS Div 最小高度在IE 6 和IE 7中的兼容性问题
N年前的两个脚本%5c暴库
CSS语法缩写规则
Windows Vista系统休眠功能
“incorrect super block” FreeBSD挂载CDROM时报错误的解决方法
网页教案,针对初学者的教案
让OpenSoralis进入纯文本模式
通过按空格键开启Vista启动选项
PHP中用header图片地址 简单隐藏图片源地址
Linux操作系统启动流程与Grub的配置方法
图片的入库与读取的方法
不要在cookie中使用特殊字符的原因分析
用js实现键盘方向键翻页功能的代码
vbs实用软件自造——Windows脚本应用实例
快速导航

Copyright © 2016 phpStudy |