`

JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

阅读更多
因为浏览器的兼容问题,如果使用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


显示在屏幕正中央
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
});


引自:http://www.jb51.net/article/21812.htm
http://blog.csdn.net/lee576/archive/2008/12/16/3528041.aspx
分享到:
评论

相关推荐

    jQuery实现获取元素索引值index的方法

    首先,我们要了解“.index()”方法的作用,它可以帮助我们获取jQuery对象集合中某个元素的索引位置。这个索引值是从0开始计数的,即第一个元素的索引值为0。这个方法既可以用来获取子元素的索引,也可以用来获取与...

    jquery 获取浏览器滚动条宽度数值

    jquery 获取当前浏览器滚动条宽度数值

    jQuery 获得控件的坐标位置

    本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动条的位置。 #### 一、`offset()` 方法 `offset()` 方法用于获取元素相对于文档的当前位置(不包括边界)。它返回一个对象,包含两个属性:`top` 和 `...

    JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    除了上述基础方法,JQuery还提供了一些高级选项,例如`offset()`方法中的`options.relativeTo`可以指定一个祖先元素作为计算偏移量的基准,而`options.scroll`和`options.padding`选项则可以控制是否将滚动条位置和...

    JavaScript和jQuery获取input框的绝对位置

    在JavaScript和jQuery的世界里,获取元素的绝对位置是一项常见的任务,尤其当涉及到动态布局或交互设计时。这个主题主要集中在如何获取HTML中的`input`框的精确位置,以便于进行定位或其他操作。以下是对这个知识点...

    jquery如何获取元素的滚动条高度等实现代码

    在JavaScript和jQuery中,处理页面布局和用户交互时,经常需要获取各种元素的尺寸和位置信息,特别是当涉及到滚动条时。本篇文章将详细介绍如何使用jQuery来获取元素的滚动条高度以及其他相关实现代码。 首先,要...

    jQuery 子级元素在父级元素内滚动

    在滚动事件的回调函数中,我们可以获取父元素和子元素的滚动位置以及它们的尺寸。然后,我们可以根据这些信息计算子元素需要的偏移量,确保它始终在视口内: ```javascript var parentScrollTop = $(this)....

    JQuery获取元素尺寸、位置及页面滚动事件应用示例

    在JavaScript中,`offset()` 方法返回元素相对于文档顶部和左侧的偏移量,包括了滚动条的影响。以下代码展示了如何使用 `offset()`: ```javascript $(function () { var $div = $('.box'); var oPos = $div....

    华丽滚动条滚动条Jquery

    "华丽滚动条滚动条Jquery"就是一个专注于提升滚动条视觉效果和交互体验的解决方案。这个标题表明我们将讨论如何利用Jquery这一强大的JavaScript库来创建炫丽的滚动条效果。 Jquery是一款广泛使用的JavaScript库,它...

    jQuery获取页面元素绝对与相对位置的方法

    本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset...

    jQuery获取浏览器窗口的宽度和高度

    总结来说,jQuery 提供的这些方法可以帮助开发者精确地获取浏览器窗口和文档的尺寸信息,以便进行灵活的页面布局和响应式设计。在选择使用哪种方法时,需要根据实际需求来判断,比如是需要获取可视区域尺寸,还是...

    Jquery中文帮助文档

    4. **动画效果(Animation)**:`fadeIn()`、`fadeOut()`、`slideToggle()`等方法为元素添加平滑的动画效果,`animate()`可以自定义动画过程,控制元素的各种属性如位置、大小、透明度等。 5. **Ajax交互(Ajax)**...

    Jquery 1.4开发文档

    jQuery 1.4时期的插件可能包括了一些早期的经典插件,如ColorBox(轻量级弹出窗口)、jScrollPane(自定义滚动条)等。 ## 7. API文档的重要性 `JQuery_1.4_API.CHM`这个CHM文件是jQuery 1.4的API文档,对于开发者...

    JQuery UI 中文帮助文档

    - **DRAGGABLE(可拖动)& RESIZABLE(可调整大小)**: 提供元素拖动和大小调整的功能,适用于创建可交互的布局元素。 - **ACCORDION(手风琴)**: 将内容组织成可折叠的面板,只显示一个面板内容,节省空间且易于...

    jQuery1.8.0帮助文档(中文)

    《jQuery1.8.0帮助文档(中文)》是一份详尽的指南,旨在为开发者提供关于jQuery 1.8.0版本的全面理解和使用方法。这个文档包含了jQuery库的各种功能、API接口、选择器、事件处理、动画效果、DOM操作、Ajax交互以及...

    jQuery美化滚动条

    在网页设计中,滚动条作为一个不可或缺的元素,其外观和用户体验往往被忽视。然而,随着网页设计趋势的发展,滚动条的美观性和交互性也变得越来越重要。jQuery.nicescroll插件正是为了解决这一问题而诞生的,它提供...

    jQuery滚动元素固定位置插件

    **jQuery滚动元素固定位置插件详解** 在网页设计中,我们常常希望某些元素在用户滚动页面时保持在屏幕的特定位置,例如导航栏或侧边栏。这时,jQuery-sticky-elements插件就能派上用场。这款插件是基于流行的...

    jQuery实现将div的滚动条滚动到指定位置

    当需要控制div元素中的滚动条滚动到特定位置时,jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解几个基本概念: 1. **div**: 在HTML中,div(division)是一...

Global site tag (gtag.js) - Google Analytics