手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js获取元素在浏览器中的绝对位置
js获取元素在浏览器中的绝对位置
摘要:JavaScript中提供获取HTML元素位置的属性:HTMLElement.offsetLeftHTMLElement.offsetHei...

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

【js获取元素在浏览器中的绝对位置】相关文章:

JS获取当前脚本文件的绝对路径

javascript获取文档坐标和视口坐标

父窗口获取弹出子窗口文本框的值

js兼容火狐获取图片宽和高的方法

详解Javascript中的Object对象

jQuery实现在列表的首行添加数据

获取对象

浅谈JavaScript中的Math.atan()方法的使用

JS或jQuery获取ASP.NET服务器控件ID的方法

JS实现兼容各浏览器解析XML文档数据的方法

精品推荐
分类导航