JQuery笔记 尺寸、位置操作 ②

二、JQuery尺寸、位置操作

(一)JQuery尺寸操作

JQuery尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型

语法	用法
width()/ height()	取得匹配元素宽度和高度值 只算width /height
innerWidth() / innerHeight	取得匹配元素宽度和高度值,包含padding
outerWidth() / outerHeight	取得匹配元素宽度和高度值,包含padding border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值,包含padding border、margin

注意：

参数为空，则获取相应值，返回的是数字型

参数为数字，则修改相应值

参数可以不写单位

(二)JQuery位置操作

1.offset()设置或获取元素偏移

①offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

②该方法有两个属性 left和top。

节点.offset().left 用于获取距离文档顶部的距离；获取水平方向的偏移量

节点.offset().top 用于获取距离文档左侧的距离；获取垂直方向的偏移量

③可以设置元素的偏移：节点.offset({top:20,left:15})

2.position()获取元素偏移

①position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准

②该方法有两个属性 left和top。position().top 用于获取距离文档顶部的距离；position().left 用于获取距离文档左侧的距离

3.scrollTop() / scrollLeft()设置或获取元素被卷去的头部和左侧

①scrollTop()方法设置或返回被选元素被卷去的头部

②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部