17. 坐标和尺寸 Offset & Dimensions

初学者经常会迷惑于jQuery的提供的获取/设置坐标和尺寸接口的差异，不知道在什么情况下该使用什么接口，现将接口和差异整理如下：

l  坐标 Offset

 

接口

公式

说明

.offset()

相对于文档document的坐标

返回或设置匹配元素相对于文档的偏移（位置），返回的对象包含两个×××属性：top和left，以像素计。此方法只对可见元素有效。

设置时可以接受带有left和top属性的对象，或函数，使用函数来设置所有匹配元素的偏移坐标。

对隐藏元素、window、document无效

.offsetParent()

取到最近的父节点

不是坐标接口

.position()

相对于父元素parent的坐标

返回匹配元素相对于父元素的位置（偏移）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

.position()把元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对absolute或者相对定位relative的父元素的偏移位置。使用.position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移

只能获取，没有设置接口

对隐藏元素、window、document无效

.scrollLeft()

.scrollTop()

滚动条的水平和垂直位置

获取或设置滚动条的水平和垂直位置。

对可见或隐藏元素都有效，对window、document有效

对非容器型元素无效

 

l  尺寸 Dimensions（结合后边的图一起理解）

 

接口

公式

说明

.width(), .height()

content

获取或设置匹配元素的高度、宽度，如果不为该方法设置参数，则返回第一个匹配元素的高度、宽度（单位是像素，整型值，不带单位）

对可见和隐藏元素都有效

.innerWidth()

.innerHeight()

content+padding

只能获取，没有设置接口（单位是像素，整型值，不带单位）

对window、document无效，用.width()/.height()代替

.outerWidth()

.outerHeight()

content+padding+border

（+可选的margin）

只能获取，没有设置接口（单位是像素，整型值，不带单位）

对window、document无效，用.width()/.heigth()代替

 


参考文章：

关于jQuery中的offset()和position() http://www.jz123.cn/text/2134435.html

jQuery 参考手册 - CSS 操作 http://www.w3school.com.cn/jquery/jquery_ref_css.asp

 

深入剖析Jquery中的offset()和position() http://www.l99.com/EditText_view.action?textId=55129