[原创] jQuery源码分析-17坐标和尺寸 Offset & Dimensions

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