jQuery源码分析-17尺寸和大小 Dimensions & Offset
来源:互联网 发布:淘宝批量删除手机详情 编辑:程序博客网 时间:2024/06/05 01:56
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()代替
- jQuery源码分析-17尺寸和大小 Dimensions & Offset
- [原创] jQuery源码分析-17坐标和尺寸 Offset & Dimensions
- jquery offset() 和 positon()
- jquery源码分析——元素大小
- jQuery源码分析之offset,position,offsetParent方法以及源码中常见的cssHooks,swap代码
- jquery 尺寸位置(height/width/offset/scrollTop/scrollLeft)
- Streaming kakfa 扩展源码 指定起始offset和结束offset
- 大小和尺寸的概念
- jquery offset
- jquery offset
- 关于jQuery中的offset()和position()
- jquery 关于offset和position详解
- JQuery中的offset()和position()深入剖析
- Jquery中的offset()和position()深入剖析
- jquery 关于offset和position详解
- Jquery中的offset()和position()方法详解
- jQuery中offset和position方法
- Jquery中的offset()和position()的区别
- amixer命令用于设置系统音量
- JSONP跨域的原理解析
- js分割字符串
- 程序员技术练级攻略
- 修改Mantis提交bug时“严重性”字段
- jQuery源码分析-17尺寸和大小 Dimensions & Offset
- chrome 插件在系统上面的安装位置
- 【CSS】font-family微软雅黑 要用Microsoft Yahei
- 新浪微博开放平台,授权成功后获取用户信息
- MPMoviePlayerViewController和MPMoviePlayerController的使用
- 与安徽将公开和规范
- Java应用程序(远程)登录linux并执行其命令
- 数据库优化-水平拆分 垂直拆分
- WebBrowser 事件