JS中的宽度

现实世间里，一个物体的宽度是明确的、没有异议的，而在JS的世界里，却有好几种获取div宽度的方法，有时这些方法获取的结果是一致的，有时确不尽相同，这一度让我很困惑。

为了理解width，我们创建一个宽200、高100的div来辅助学习：

<div id="box" style="width:200px;height:100px;"></div>

首先我先给上结论，之后我会用例子验证结论的正确性：

获取宽度的方式	宽度值
clientWidth	内容宽度 + 左右padding
offsetWidth	内容宽度 + 左右padding + 左右border
width()	内容宽度
innerWidth()	内容宽度 + 左右padding
outerWidth()	内容宽度 + 左右padding + 左右border
outerWidth(true)	内容宽度 + 左右padding + 左右border + 左右margin

其中，clientWidth和offsetWidth是原生dom对象的属性，其余的是jQuery对象的方法。

那么下面我们开始验证结论的正确性，此时内容宽度是200px，padding和border都是0px。
因此：

获取宽度的方式	计算值
clientWidth	200 + 0 + 0 = 200
offsetWidth	200 + 0 + 0 + 0 + 0 = 200
width()	200
innerWidth()	200 + 0 + 0 = 200
outerWidth()	200 + 0 + 0 + 0 + 0 = 200
outerWidth(true)	200 + 0 + 0 + 0 + 0 + 0 + 0 = 200

再用浏览器开发者工具(F12)的console验证，此时结论正确：

1.png

接着，我们给div加上左右padding(左右padding分别设为20px和30px)：

<div id="box" style="width:200px;height:100px;padding-left:20px;padding-right:30px;"></div>

如果你们跟着写这个demo进行验证，可以发现，在浏览器中，这个div变宽了，那是因为此时用css设定的宽度200是针对内容的，而div的可视区域包括padding和border，因此padding变大了，div也就变大了。

我们接着算现在各种方式的宽度：

获取宽度的方式	计算值
clientWidth	200 + 20 + 30 = 250
offsetWidth	200 + 20 + 30 + 0 + 0 = 250
width()	200
innerWidth()	200 + 20 + 30 = 250
outerWidth()	200 + 20 + 30 + 0 + 0 = 250
outerWidth(true)	200 + 20 + 30 + 0 + 0 + 0 + 0 = 250

验证：

2.png

我们再给div加上左右border(左右边框分别设为10px和15px)：

<div id="box" style="width:200px;height:100px;padding-left:20px;padding-right:30px;border-left:10px solid black;border-right:15px solid black;"></div>

计算宽度：

获取宽度的方式	计算值
clientWidth	200 + 20 + 30 = 250
offsetWidth	200 + 20 + 30 + 10 + 15 = 275
width()	200
innerWidth()	200 + 20 + 30 = 250
outerWidth()	200 + 20 + 30 + 10 + 15 = 275
outerWidth(true)	200 + 20 + 30 + 10 + 15 + 0 + 0 = 275

验证：

3.png

最后，我们给div加上左右margin(左右margin分别设为16px和32px)：

<div id="box" style="width:200px;height:100px;padding-left:20px;padding-right:30px;border-left:10px solid black;border-right:15px solid black;margin-left:16px;margin-right:32px;"></div>

计算宽度：

获取宽度的方式	计算值
clientWidth	200 + 20 + 30 = 250
offsetWidth	200 + 20 + 30 + 10 + 15 = 275
width()	200
innerWidth()	200 + 20 + 30 = 250
outerWidth()	200 + 20 + 30 + 10 + 15 = 275
outerWidth(true)	200 + 20 + 30 + 10 + 15 + 16 + 32 = 323

验证：

4.png

至此幸不辱命，结论悉数验证通过(验证使用的是谷歌核心的浏览器)，不过还有一点要说明一下：

上面我们说过，css设定的宽度200是针对内容的，其实当我们给div加上样式box-sizing:border-box的时候，width:200px的作用范围就变成也包括border和padding，我们再来验证一下上面最后的那个例子，首先计算宽度：

获取宽度的方式	计算值
clientWidth	200 - 10 - 15 = 175
offsetWidth	200
width()	200 - 10 - 15 - 20 - 30 = 125
innerWidth()	200 - 10 - 15 = 175
outerWidth()	200
outerWidth(true)	200 + 16 + 32 = 248

验证：

5.png

此种情况下，结论依然正确，希望至此大家已经理解各种获取div宽度的属性和方法。