jQuery 尺寸

测量和设置元素尺寸是布局与动画的常客。jQuery 提供四组尺寸方法，它们对应 CSS 盒模型的不同范围：内容区、含内边距、含边框、含外边距。

先定义一个带多层"盒子"样式的元素：

<style>
    #demo {
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid #000;
        margin: 10px;
    }
</style>
<div id="demo">尺寸示例</div>
<button id="btn">看尺寸</button>

width() 与 height()：内容区尺寸

width()/height() 返回内容区（不含 padding、border、margin）的宽高，无单位数字：

console.log($("#demo").width());  // 输出：200
console.log($("#demo").height()); // 输出：100

效果：得到的是纯数字，可直接参与计算，如判断是否超出容器。

innerWidth() 与 innerHeight()：含内边距

inner 系列 = 内容区 + padding（不含 border 和 margin）：

console.log($("#demo").innerWidth());  // 输出：240（200 + 左右各 20）
console.log($("#demo").innerHeight()); // 输出：140（100 + 上下各 20）

outerWidth() 与 outerHeight()：含边框

outer 系列 = 内容区 + padding + border（不含 margin）：

console.log($("#demo").outerWidth());  // 输出：250（240 + 左右边框各 5）
console.log($("#demo").outerHeight()); // 输出：150（140 + 上下边框各 5）

四层尺寸的关系

方法	范围	本例结果
width() / height()	内容区	200 / 100
innerWidth() / innerHeight()	内容 + padding	240 / 140
outerWidth() / outerHeight()	内容 + padding + border	250 / 150
outerWidth(true) / outerHeight(true)	再加上 margin	270 / 170

数值关系：200 → 240 → 250 → 270，一层层加上去，很好记忆。

outerWidth(true)：把外边距也算上

传 true 后连 margin 一起统计，得到元素真正"占位"的大小：

$("#btn").click(function () {
    console.log($("#demo").outerWidth(true));  // 输出：270
    console.log($("#demo").outerHeight(true)); // 输出：170
});
// 效果：点击按钮后控制台打印含 margin 的完整占地尺寸

设置尺寸

这些方法传入参数即可设置对应范围的尺寸，自动补上 px：

$("#demo").width(300).height(150);
// 效果：内容区变成 300 × 150，padding、border、margin 保持不变

小结

尺寸四件套对应盒模型的层层范围：width/height 只管内容，inner 加上 padding，outer 再加 border，outer(true) 连 margin 也统计。布局测量首选 outerWidth(true)，改动内容区则用 width()/height()。