Jquery怎么获取元素文档大小、偏移、位置和滚动条位置

转载 2015年07月07日 23:27:19
因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程。好在jqeury提供了简单优雅,并且兼容的解决方法。
1.获取浏览器和页面文档的宽度和高度
//获取浏览器显示区域的高度
$(window).height();
//获取浏览器显示区域的宽度
$(window).width();

//获取页面文档的高度
$(document.body).height();
//获取页面文档的宽度
$(document.body).width();

2.获取滚动条的位置
//获取滚动条到顶部的垂直高度
$(document).scrollTop();
//获取滚动条到左边的垂直高度
$(document).scrollLeft();

3.计算位置和偏移量
offset()方法返回或设置元素相对于文档的偏移(位置)。
使用方法:
1〉返回偏移坐标
$(selector).offset();----该方法返回的对象包含两个整形属性:top和left,以像素计算。此方法对可见元素有效。
2〉设置偏移坐标
$(selector).offset(value);----value必须规定以像素计的top和left坐标。可能的值:a,值对,比如{top:100,left:0};b,带有top和left属性的对象。

实例:
            $(":button:first").click(function () {
                var oldOffset = $(this).offset();
                var newOffset = new Object();
                newOffset.left = oldOffset.left + 20;
                newOffset.top = oldOffset.top + 20;
                $(this).offset(newOffset);
                return false;
            });


------注明,以下内容没有验证成功,不能作为参考
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

相关文章推荐

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

在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性。还需要知道页面、浏览器、滚动条等的长度和宽度。因为浏览器的兼容问题,如果使用javascript获取这些数值是...

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

因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程。好在JQuery提供了简单优雅,并且兼容的解决方法。 获取浏览器和页面文档的宽度和高度 Js代码...

JS与JQUERY获取页面大小、滚动条位置、元素位置

js与jquery获得页面大小、滚动条位置、元素位置 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.in...

各浏览器对于获取文档水平及垂直方向滚动条位置(scrollLeft、scrollTop)时的参考元素存在差异

 问题描述 针对获取页面的垂直滚动条的位置,IE Firefox Opera 标准模式下使用 document.documentElement.scrollLeft 获取页面的水平滚动条位置,...

js与jquery获得页面大小、滚动条位置、元素位置

//页面位置及窗口大小function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {   ...

jQuery中scrollTop获取匹配元素相对滚动条顶部的偏移(此方法对可见和隐藏元素均有效。)

webrx-title /*returnTop*/   p#back-to-top{       position:fixed;       display:none;       bo...

GetPageSize和GetPageScroll:获取页面大小、窗口大小和滚动条位置

页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如Firefox和IE中有着不同的实现。即使在同一种浏览器例如IE中,不同版本也有不同的实现。本文给出两个能兼容目前所有浏览器的Javascri...

GetPageSize和GetPageScroll:获取页面大小、窗口大小和滚动条位置

页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如Firefox和IE中有着不同的实现。即使在同一种浏览器例如IE中,不同版本也有不同的实现。本文给出两个能兼容目前所有浏览器的Javascri...

用 Javascript 获取頁面大小、窗口大小和滾動條位置

頁面大小、窗口大小和滾動條位置這三個數值在不衕的瀏覽器例如 Firefox 和 IE 中有著不衕的實現。即使在衕一種瀏覽器例如 IE 中,不衕版本也有不衕的實現。 本文給出兩個能兼容目前所有瀏覽...

jQuery根据滚动条位置加载相应的内容

实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容;向上滚动到相应的内容区域时也重新加载动画内容!
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)