如何获取元素距离页面顶部的高度

1、首先在html页面上，看到有一个按钮，要获得这个按钮离顶部的距离。

2、在按钮的事件函数里，先取这个按钮的offset数据，通过jquery的offset方法。

3、得到的结果是一个数组对象，只要获取里面的top数据就行了。

4、使用log方法，把数据输出到浏览器的控制台。

5、运行页面，看到现在的按钮位置。距离顶部估计是500px左右吧，点击一下这个按钮。

6、然后看一下控制台上的数据，得到距离为439的像素。

jquery获取html元素的高度使用height()方法即可。

定义和用法：

height() 方法返回或设置匹配元素的高度。

返回高度：

返回第一个匹配元素的高度。

如果不为该方法设置参数，则返回以像素计的匹配元素的高度。

语法：

$(selector)height(length)

例如：

$("btn1")click(function(){

alert($("p")height());

});

设置高度：

设置所有匹配元素的高度。

语法：

$(selector)height(length)

例如：

$("btn1")click(function(){

$("p")height(50);

});

先来一个浏览器窗口大小改变的事件，用来查看浏览器窗口的大小被改变可以触发一些函数

windowonresize 浏览器窗口大小改变事件

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。

（不加边线）：

网页可见区域的高度和宽度（加边线）：

$(window)height();//是文档窗口高度

$("div")offset()top//是标签距离顶部高度（没有到下面的距离，比如$("div")offset()down）

$("div")offset()left//是标签距离右边高度（没有到下面的距离，比如$("div")offset()right）

$(document)scrollTop();//是滚动条高度

$("div")height();//是标签高度

你要的高度+$("div")height()+[$("div")offset()top-$(document)scrollTop()]=$(window)height();

经过简单的数学变换即可得到你要的值了

获取页面某一元素的绝对X,Y坐标，可以用offset()：

var X = $(‘#DivID’)offset()top;

var Y = $(‘#DivID’)offset()left;

获取相对(父元素)位置:

var X = $(‘#DivID’)position()top;

var Y = $(‘#DivID’)position()left;

通过getBoundingClientRect方法获取对象位置，包含： left , top , right , bottom 4个参数值。

以上就是关于如何获取元素距离页面顶部的高度全部的内容，包括:如何获取元素距离页面顶部的高度、使用jquery动态添加表格的行之后，如何获取表格高度、js获取各种高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！