jQuery 1.9.1源码分析系列（十三）之位置大小操作

本文将分享jQuery 1.9.1版本的位置大小操作的相关内容，包括尺寸与位置处理以及相关API的使用方法。

获取尺寸与位置

获取尺寸

使用如下API获取元素尺寸：

var width = $(selector).width();   //获取元素宽度
var height = $(selector).height(); //获取元素高度
var innerWidth = $(selector).innerWidth(); //获取元素内宽度（包含padding）
var innerHeight = $(selector).innerHeight(); //获取元素内高度（包含padding）
var outerWidth = $(selector).outerWidth(); //获取元素外宽度（包含padding和border）
var outerHeight = $(selector).outerHeight(); //获取元素外高度（包含padding和border）
var trueOuterWidth = $(selector).outerWidth(true); //获取元素真实外宽度（包含padding、border和margin）
var trueOuterHeight = $(selector).outerHeight(true); //获取元素真实外高度（包含padding、border和margin）

其中，$(selector)是选择器，可以是class、id或标签等。

获取位置

使用如下API获取元素位置：

var position = $(selector).position(); //获取元素相对于父元素的位置
var offset = $(selector).offset(); //获取元素相对于页面的位置（包含margin）

示例说明

我们可以创建一个div来测试以上API，HTML代码如下：

<div id="test" style="width:100px;height:100px;padding:10px;border:5px solid red;margin:20px;"></div>

接下来我们可以使用以上API测试该div的尺寸与位置：

var width = $("#test").width();   //120
var height = $("#test").height(); //120
var innerWidth = $("#test").innerWidth(); //140
var innerHeight = $("#test").innerHeight(); //140
var outerWidth = $("#test").outerWidth(); //150
var outerHeight = $("#test").outerHeight(); //150
var trueOuterWidth = $("#test").outerWidth(true); //190
var trueOuterHeight = $("#test").outerHeight(true); //190

var position = $("#test").position(); //{top: 20, left: 20}
var offset = $("#test").offset(); //{top: 40, left: 40}

设置尺寸与位置

设置尺寸

使用如下API设置元素尺寸：

$(selector).width(value);   //设置元素宽度
$(selector).height(value); //设置元素高度
$(selector).innerWidth(value); //设置元素内宽度
$(selector).innerHeight(value); //设置元素内高度
$(selector).outerWidth(value); //设置元素外宽度
$(selector).outerHeight(value); //设置元素外高度

设置位置

使用如下API设置元素位置：

$(selector).position({top: value1, left: value2}); //设置元素相对于父元素的位置
$(selector).offset({top: value1, left: value2}); //设置元素相对于页面的位置

示例说明

我们可以创建一个div来测试以上API，HTML代码如下：

<div id="test" style="width:100px;height:100px;padding:10px;border:5px solid red;margin:20px;position:absolute;"></div>

接下来我们可以使用以上API测试该div的尺寸与位置：

$("#test").width(200);   //设置元素宽度为200px
$("#test").height(200); //设置元素高度为200px
$("#test").innerWidth(220); //设置元素内宽度为220px
$("#test").innerHeight(220); //设置元素内高度为220px
$("#test").outerWidth(230); //设置元素外宽度为230px
$("#test").outerHeight(230); //设置元素外高度为230px

$("#test").position({top: 50, left: 50}); //设置元素相对于父元素位置
$("#test").offset({top: 100, left: 100}); //设置元素相对于页面位置

结语

通过本文的讲解，我们了解了如何获取元素尺寸和位置，以及如何设置元素尺寸和位置，并提供了相关API的使用方法。希望这篇文章能帮助您更好地掌握jQuery的位置大小操作。