当前位置: 代码迷 >> Web前端 >> [原创] jQuery源码分析-17尺码和大小 Dimensions & Offset
  详细解决方案

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

热度:583   发布时间:2012-09-22 21:54:54.0
[原创] jQuery源码分析-17尺寸和大小 Dimensions & Offset

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

17. 坐标和尺寸 Offset & Dimensions

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

?

l? 坐标 Offset

?

接口

公式

说明

.offset()

相对于文档document的坐标

返回或设置匹配元素相对于文档的偏移(位置),返回的对象包含两个整形属性:topleft,以像素计。此方法只对可见元素有效。

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

隐藏元素windowdocument无效

.offsetParent()

取到最近的父节点

不是坐标接口

.position()

相对于父元素parent的坐标

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

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

只能获取,没有设置接口

隐藏元素、windowdocument无效

.scrollLeft()

.scrollTop()

滚动条的水平和垂直位置

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

对可见或隐藏元素都有效,对windowdocument有效

对非容器型元素无效

?

l? 尺寸 Demensions(结合后边的图一起理解)

?

接口

公式

说明

.width(), .height()

content

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

对可见和隐藏元素都有效

.innerWidth()

.innerHeight()

content+padding

只能获取,没有设置接口(单位是像素,整型值,不带单位)

windowdocument无效,用.width()/.height()代替

.outerWidth()

.outerHeight()

content+padding+border

+可选的margin

只能获取,没有设置接口(单位是像素,整型值,不带单位)

windowdocument无效,用.width()/.heigth()代替

?

?

?

1 楼 晨曦的朝阳 2011-11-23  
终于看到比较轻松的一节了。
2 楼 nuysoft 2011-11-24  
晨曦的朝阳 写道
终于看到比较轻松的一节了。

懒了,只翻译了官网API
  相关解决方案