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中scrollTop获取匹配元素相对滚动条顶部的偏移(此方法对可见和隐藏元素均有效。)

webrx-title /*returnTop*/   p#back-to-top{       position:fixed;       display:none;       bo...
  • lnx0307
  • lnx0307
  • 2014年10月04日 23:16
  • 1653

jQuery实现定位滚动条位置

scrollTop() 方法scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
  • duola8789
  • duola8789
  • 2017年11月08日 20:32
  • 228

获取元素相对于文档的偏移量以及元素相对于父元素的偏移量

问题1:如果获取元素距离文档顶部的距离? var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top...
  • liangklfang
  • liangklfang
  • 2015年12月22日 09:30
  • 5722

jQuery 实现交换元素位置(移动节点)

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3-3-2        //   $(function(...
  • ld513508088
  • ld513508088
  • 2014年05月26日 22:46
  • 33902

jquery移动元素位置

ele.parent() : 获取一个元素的临近的父级 ele.prev() :获取在其上面的临近兄弟节点 ele.next() :获取在其下面的临近的兄弟节点 ele.before...
  • Leon20160711
  • Leon20160711
  • 2016年07月14日 17:16
  • 780

jquery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

jquery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令。 app...
  • happymagic
  • happymagic
  • 2013年01月04日 10:40
  • 22667

JQuery实现鼠标拖动元素移动位置

JQuery实现元素移动位置有很多种方法,其中一个是根据鼠标在指定区域内随意移动,还有一种的是根据方向键在一定区域内上下左右平移。这二种只能说各有优劣,通过方向键平移,实现相对简单,操作也更具备可控性...
  • qq_33281417
  • qq_33281417
  • 2017年04月18日 15:59
  • 1760

【jQuery学习笔记-----绝对偏移位置】

绝对偏移位置 所谓绝对偏移位置就是指定元素距离浏览器窗口左上角的偏移距离。(回忆js学习时的窗口坐标和文档坐标)。 jQuery实现 jQuery定义了offset()方法,该方法能够获取匹配元...
  • pigpigpig4587
  • pigpigpig4587
  • 2014年04月25日 14:59
  • 3395

JavaScript获取DOM元素位置和尺寸大小

JavaScript获取DOM元素位置和尺寸大小
  • u013861109
  • u013861109
  • 2016年10月22日 21:22
  • 5228

用Javascript获取页面元素的位置

一、网页的大小和浏览器窗口的大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的大小。通常情况下,网页的大小由内容和CSS样式表决定。 浏览器窗口的大小,则是指在浏览器窗口...
  • liaozhongping
  • liaozhongping
  • 2016年11月25日 13:55
  • 903
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery怎么获取元素文档大小、偏移、位置和滚动条位置
举报原因:
原因补充:

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