JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
更新时间：2010年01月12日 00:51:23 作者：
在ajax中经常需要对元素的位置进行精确的定位，此时不仅需要获取元素自身的大小位置等属性。还需要知道页面、浏览器、滚动条等的长度和宽度。
因为浏览器的兼容问题，如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅，并且兼容的解决方法。
获取浏览器和页面文档的宽度和高度
//获取浏览器显示区域的高度
$(window).height();
//获取浏览器显示区域的宽度
$(window).width();
//获取页面的文档高度
$(document.body).height();
//获取页面的文档宽度
$(document.body).width();
获取滚动条的位置
//获取滚动条到顶部的垂直高度
$(document).scrollTop();
//获取滚动条到左边的垂直宽度
$(document).scrollLeft();
计算位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把滚动条计算在内，默认TRUE
options.padding 是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border 是否把边框计算在内，默认true
获取浏览器和页面文档的宽度和高度
复制代码 代码如下:
//获取浏览器显示区域的高度
$(window).height();
//获取浏览器显示区域的宽度
$(window).width();
//获取页面的文档高度
$(document.body).height();
//获取页面的文档宽度
$(document.body).width();
获取滚动条的位置
复制代码 代码如下:
//获取滚动条到顶部的垂直高度
$(document).scrollTop();
//获取滚动条到左边的垂直宽度
$(document).scrollLeft();
计算位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把滚动条计算在内，默认TRUE
options.padding 是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border 是否把边框计算在内，默认true
您可能感兴趣的文章:
相关文章
本文主要介绍了对称加密与非对称加密的优缺点，具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
一个简单的jquery弹出框代码实现，点击链接弹出模式对话框，任意点击网页的其它地方可以关闭弹出框，可以自定义透明度，简单实用的jquery弹出框效果。2015-04-04
这篇文章主要为大家详细介绍了jQuery的事件处理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
下面小编就为大家分享一篇jquery中done和then的区别(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
本文详细讲解了Jquery回调对象与延迟对象的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了JQuery通过键盘控制键盘按下与松开触发事件，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了jQuery实现Ajax功能,结合实例形式分析了jQuery ajax功能实现方法以及与Flask后台进行交互的相关操作技巧,需要的朋友可以参考下2019-06-06
在初始化jQuery对象的代码开始之前声明了一大堆变量。主要包括：全局变量的备份；处理字符串用的正则表达式；检测浏览器的正则表达式；对核心函数的引用备份。这里略过大部分，只说两种：全局变量和浏览器检测。2011-05-05
这篇文章主要介绍了jquery中change()用法,实例分析了change的功能、定义及具体的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
Javascript中封装window.open解决不兼容问题
window.open不兼容,其实不是, 因为不能直接执行, 必须通过用户手动触发才行，下面有个实例，大家可以看看2014-09-09
最新评论