js获取元素在浏览器中的绝对位置
更新时间：2010年07月24日 00:56:53 作者：
其原理就是利用HTMLElement.offsetParent属性，需要的朋友可以参考下。
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，再将其加之，最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。
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获取鼠标相对位置的方法,涉及javascript事件响应及针对页面元素属性的动态操作技巧,需要的朋友可以参考下2016-09-09
用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。2010-02-02
这篇文章主要介绍了css和js实现弹出登录居中界面，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
在做项目的时候，经常会需要截取字符串，所以常用的方法有slice()、substr()、substring()、match()方法等，下面通过示例代码介绍四个方法的使用，感兴趣的朋友跟随小编一起看看吧2023-02-02
在实际的项目开发中，我们经常需要三级联动，比如省市区的选择，商品的三级分类的选择等等。这篇文章主要介绍了JS封装的三级联动菜单(使用时只需要一行js代码)的相关资料,需要的朋友可以参考下2016-10-10
这篇文章介绍了js 单击式的下拉菜单效果实例，有需要的朋友可以参考一下2013-08-08
浅谈nodeName,nodeValue,nodeType,typeof 的区别
本文主要简单介绍了nodeName,nodeValue,nodeType,typeof 的区别,算是知识点的一个小总结，希望对小伙伴们有所帮助2015-01-01
firefox下input type="file"的size是多大
firefox对type="file" 的input的width定义目前是不支持的，但是FF支持size属性，可以给size设置一个值，来控制上传框的大小2011-10-10
最近正在做微信小程序，需要实现一个流程进度的图样式，下面小编给大家带来了微信小程序实现流程进度的图样式功能实例代码，需要的朋友参考下吧2018-01-01
下面小编就为大家带来一篇js 获取站点应用名的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论