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

边读边写，不正确的地方，还请各位告诉我，多多交流共同学习，PDF下载地址在最后。

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  尺寸 Demensions（结合后边的图一起理解）

 

接口	公式	说明
.width(), .height()	content	获取或设置匹配元素的高度、宽度，如果不为该方法设置参数，则返回第一个匹配元素的高度、宽度（单位是像素，整型值，不带单位） 对可见和隐藏元素都有效
.innerWidth() .innerHeight()	content+padding	只能获取，没有设置接口（单位是像素，整型值，不带单位） 对window、document无效，用.width()/.height()代替
.outerWidth() .outerHeight()	content+padding+border （+可选的margin）	只能获取，没有设置接口（单位是像素，整型值，不带单位） 对window、document无效，用.width()/.heigth()代替

 

 

 

评论

2 楼 nuysoft 2011-11-24  

晨曦的朝阳 写道

终于看到比较轻松的一节了。

懒了，只翻译了官网API

1 楼 晨曦的朝阳 2011-11-23  

终于看到比较轻松的一节了。