jQuery系列(八):jQuery的位置信息
1、宽度和高度
(1):获取宽度
.width()
描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width)
和 .width()
之间的区别是后者返回一个没有单位的数值(例如,400
),前者是返回带有完整单位的字符串(例如,400px
)。当一个元素的宽度需要数学计算的时候推荐使用.width()
方法 。
(2):设置宽度
.width( value )
描述:给每个匹配的元素设置CSS宽度。
2、高度
(1):获取高度
.height()
描述:获取匹配元素集合中的第一个元素的当前计算高度值。
- 这个方法不接受任何参数。
(2):设置高度
.height( value )
描述:设置每一个匹配元素的高度值。
2、innerHeight()和innerWidth()
(1):获取内部宽度
.innerWidth()
描述:为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border。
ps:这个方法不适用于window
和 document
对象,对于这些对象可以使用.width()
代替。
(2)设置内部宽
.innerWidth(value);
描述: 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)
(3):获取内部高
.innerHeight()
描述:为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。
ps:这个方法不适用于window
和 document
对象,对于这些对象可以使用.height()
代替。
(4):设置内部高
.innerHeight(value);
描述: 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)
3、outWidth和outHeight
(1):获取外部宽
.outerWidth( [includeMargin ] )
描述:获取匹配元素集合中第一个元素的当前计算外部宽度(包括padding,border和可选的margin)
- includeMargin (默认:
false
)类型:Boolean
一个布尔值,表明是否在计算时包含元素的margin值。 - 这个方法不适用于
window
和document
对象,可以使用.width()
代
(2):设置外部宽
.outerWidth( value )
描述: 为匹配集合中的每个元素设置CSS外部宽度。
(3):获取外部高
.outerHeight( [includeMargin ] )
描述:获取匹配元素集合中第一个元素的当前计算外部高度(包括padding,border和可选的margin)
- includeMargin (默认:
false
)类型:Boolean
一个布尔值,表明是否在计算时包含元素的margin值。 - 这个方法不适用于
window
和document
对象,可以使用.width()
代替
(4):设置外部高
.outerHeight( value )
描述: 为匹配集合中的每个元素设置CSS外部高度。
4、偏移
(1)获取
.offset()
返回值:Object 。.offset()
返回一个包含top
和 left
属性的对象 。
描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。
注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden
,那么我们依然可以取得它的坐标
(2)设置
.offset( coordinates )
描述: 设置匹配的元素集合中每一个元素的坐标, 坐标相对于文档。
- coordinates类型: Object一个包含
top
和left
属性的对象,用整数指明元素的新顶部和左边坐标。
例子:
$("p").offset({ top: 10, left: 30 });
5、元素坐标
.position()
返回值:Object{top,left}
描述获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )
当把一个新元素放在同一个容器里面另一个元素附近时,用.position()
更好用。
6、滚动距离
(1):水平方向
a、获取:
.scrollLeft()
描述:获取匹配的元素集合中第一个元素的当前水平滚动条的位置(页面卷走的宽度)
b、设置
.scrollLeft( value )
描述:设置每个匹配元素的水平方向滚动条位置。
(2):垂直方向
a、获取
.scrollTop()
描述:获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)
b、设置
.scrollLeft( value )
描述:设置每个匹配元素的垂直方向滚动条位置。
最新文章
- 4-pl-sql的安装
- p/invoke碎片,对结构体的处理
- Ubuntu 用vsftpd 配置FTP服务器
- 基于angular写的一个todolist
- SequoiaDB 系列源码分析调整
- Java-->;类的成员
- Android -- 距离感应器控制屏幕灭屏白屏
- iframe标签用法详解(属性、透明、自适应高度)(总结)
- 大四实习准备6_android服务
- adb server didn t ack failed to start daemon
- 窗口绘制有关的消息整理 WM_PAINT, WM_NCPAINT, WM_ERASEBKGND
- Android 开发之开发插件使用:Eclipse 插件 SQLiteManger eclipse中查看数据内容--翻译
- Rational Rose2013安装及破解教程
- 201521123095 《Java程序设计》第3周学习总结
- Docker入门之常用命令
- Python中列表、元组、字典增删改查基本区别
- spark集群的简单测试和基础命令的使用
- mac crontab调用python时出现ImportError: No module named XXX的问题
- jsp页面简单的验证码实现
- Vue.js学习笔记——表单控件实践