$(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个参数值。

可以使用offset() 方法，该方法返回或设置匹配元素相对于文档的偏移（位置），该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离，代码如下：

$(document)ready(function(){

  $("button")click(function(){

    x=$("p")offset();

    $("#span1")text(xleft);

    $("#span2")text(xtop);

  });

});

本段落的偏移是 unknown left 和 unknown top。

获得 offset

2、运行的结果如下：

获取浏览器显示区域的高度 ：

$(window)height();

获取浏览器显示区域的宽度 ：

$(window)width();

获取页面的文档高度 ：

$(document)height();

获取页面的文档宽度 ：

$(document)width();

获取滚动条到顶部的垂直高度 ：

$(document)scrollTop();

获取滚动条到左边的垂直宽度 ：

$(document)scrollLeft();

计算元素位置和偏移量：

$(id)offset();

height()

-获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。

-css('height') 和 height()之间的区别是后者返回一个没有单位的数值，前者是返回带有完整单位的字符串。当一个元素的高度需要数学计算的时候推荐使用height() 方法 。

-这个方法同样能计算出window和document的高度。

$(window)height(); // returns height of browser viewport

$(document)height(); // returns height of HTML document

注意：在绝对定位和给定display:block时，虽然style和script标签用width() 或 height()也将报告一个值，强烈建议不要在这些标签中调用这些方法。这是一种不好的做法，结果也证明是不可靠的。

innerHeight()

-为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。

-这个方法返回元素的高度，包括顶部和底部的padding，单位是像素。

-这个方法不适用于window and document对象，可以使用height()代替。

outerHeight()

-获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

-outerHeight( [includeMargin ] )：include是一个布尔值，表明是否在计算时包含元素的margin值。

-这个方法不适用于window 和 document对象，可以使用height()代替。

1、打开sublime text3，也可以用其他编辑器，这里新建一个HTML文档作为示范。

2、创建一下HTML文档的基本架构。

3、设置多个标签，这样等会可以有更多选择。

4、创建一个JS文档，并且与HTML文档关联。

5、输入var test = documentgetElementById( "pp")offsetTop;documentwrite( test )。

6、offsetLeft就能知道元素到顶部的距离。

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery。

2、在indexhtml中的标签，输入jquery代码：

$('body')append('height: ' + $(document)height() + '');

$('body')append('width: ' + $(document)width());

3、浏览器运行indexhtml页面，此时会打印出界面最大可以滚动的文档宽度和文档高度。

首先介绍几个属性（都是jquery的属性，可以免去兼容性的烦恼）

1 网页被卷起来的高度/宽度（即浏览器上方隐藏的页面内容高度）

2 浏览器工作区域的高度和宽度

3 元素距离文档顶端和左边的偏移值

4 页面的文档高度

参考文章 >

以上就是关于jquery怎么获取元素距离屏幕的位置全部的内容，包括:jquery怎么获取元素距离屏幕的位置、jquery获取元素距离浏览器顶部的可视高度、jquery 如何获取滚动条的宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://outofmemory.cn/web/9305303.html