因为浏览器的兼容问题,如果使用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
分享到:
相关推荐
首先,我们要了解“.index()”方法的作用,它可以帮助我们获取jQuery对象集合中某个元素的索引位置。这个索引值是从0开始计数的,即第一个元素的索引值为0。这个方法既可以用来获取子元素的索引,也可以用来获取与...
jquery 获取当前浏览器滚动条宽度数值
本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动条的位置。 #### 一、`offset()` 方法 `offset()` 方法用于获取元素相对于文档的当前位置(不包括边界)。它返回一个对象,包含两个属性:`top` 和 `...
除了上述基础方法,JQuery还提供了一些高级选项,例如`offset()`方法中的`options.relativeTo`可以指定一个祖先元素作为计算偏移量的基准,而`options.scroll`和`options.padding`选项则可以控制是否将滚动条位置和...
在JavaScript和jQuery的世界里,获取元素的绝对位置是一项常见的任务,尤其当涉及到动态布局或交互设计时。这个主题主要集中在如何获取HTML中的`input`框的精确位置,以便于进行定位或其他操作。以下是对这个知识点...
在JavaScript和jQuery中,处理页面布局和用户交互时,经常需要获取各种元素的尺寸和位置信息,特别是当涉及到滚动条时。本篇文章将详细介绍如何使用jQuery来获取元素的滚动条高度以及其他相关实现代码。 首先,要...
在滚动事件的回调函数中,我们可以获取父元素和子元素的滚动位置以及它们的尺寸。然后,我们可以根据这些信息计算子元素需要的偏移量,确保它始终在视口内: ```javascript var parentScrollTop = $(this)....
在JavaScript中,`offset()` 方法返回元素相对于文档顶部和左侧的偏移量,包括了滚动条的影响。以下代码展示了如何使用 `offset()`: ```javascript $(function () { var $div = $('.box'); var oPos = $div....
"华丽滚动条滚动条Jquery"就是一个专注于提升滚动条视觉效果和交互体验的解决方案。这个标题表明我们将讨论如何利用Jquery这一强大的JavaScript库来创建炫丽的滚动条效果。 Jquery是一款广泛使用的JavaScript库,它...
本文实例讲述了jQuery获取页面元素绝对与相对位置的方法。分享给大家供大家参考。具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset...
总结来说,jQuery 提供的这些方法可以帮助开发者精确地获取浏览器窗口和文档的尺寸信息,以便进行灵活的页面布局和响应式设计。在选择使用哪种方法时,需要根据实际需求来判断,比如是需要获取可视区域尺寸,还是...
4. **动画效果(Animation)**:`fadeIn()`、`fadeOut()`、`slideToggle()`等方法为元素添加平滑的动画效果,`animate()`可以自定义动画过程,控制元素的各种属性如位置、大小、透明度等。 5. **Ajax交互(Ajax)**...
《jQuery 1.5.2 中文开发文档》是一份详尽的参考资料,旨在帮助开发者深入理解和高效使用jQuery 1.5.2版本。jQuery是一个广泛应用于网页动态交互的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax...
jQuery 1.4时期的插件可能包括了一些早期的经典插件,如ColorBox(轻量级弹出窗口)、jScrollPane(自定义滚动条)等。 ## 7. API文档的重要性 `JQuery_1.4_API.CHM`这个CHM文件是jQuery 1.4的API文档,对于开发者...
jQuery UI 是一个基于 jQuery JavaScript 库的开源用户界面插件集合,它提供了各种可交互的组件和美化效果,用于创建功能丰富的网页应用程序。这个中文文档集是为开发者提供关于如何使用 jQuery UI 的详细指南,包括...
《jQuery1.8.0帮助文档(中文)》是一份详尽的指南,旨在为开发者提供关于jQuery 1.8.0版本的全面理解和使用方法。这个文档包含了jQuery库的各种功能、API接口、选择器、事件处理、动画效果、DOM操作、Ajax交互以及...
在网页设计中,滚动条作为一个不可或缺的元素,其外观和用户体验往往被忽视。然而,随着网页设计趋势的发展,滚动条的美观性和交互性也变得越来越重要。jQuery.nicescroll插件正是为了解决这一问题而诞生的,它提供...
**jQuery滚动元素固定位置插件详解** 在网页设计中,我们常常希望某些元素在用户滚动页面时保持在屏幕的特定位置,例如导航栏或侧边栏。这时,jQuery-sticky-elements插件就能派上用场。这款插件是基于流行的...