前面两篇讲了 width() 和 height()，它们只处理内容区域的尺寸。但在页面布局中，元素往往带有 padding，这时候内容宽度加上内边距才是我们真正关心的“可视区域”宽度。jQuery 的 innerWidth() 方法就是专门干这个的。
innerWidth() 的计算范围是：内容宽度 + 左右 padding。它不包含 border，也不包含 margin。这个定位很清晰——它比 width() 多算了 padding，又比 outerWidth() 少算了 border。对于需要精确掌握元素内部可用空间的需求，这个方法刚好合适。
为什么要有这么细的区分？因为不同场景关心的尺寸边界不一样。比如你要在一个容器里放一张图片，需要知道去掉内边距后还剩多少空间来给图片设置尺寸，这时候 innerWidth() 就比 width() 更实用——它直接告诉你容器内部实际可用的宽度。反过来如果你只需要内容本身的宽度，就用 width()，多加一层 padding 算出来的值反而不对。
语法形式
$(selector).innerWidth()
注意 innerWidth() 只能获取宽度，不能设置。这个跟 width() 不一样，width(value) 可以赋值，但 innerWidth() 没有设置功能。毕竟 innerWidth 是内容加 padding 的推导值，要改变它只能通过调整 width 或 padding 来实现。
基础示例：获取 innerWidth
下面这个例子用按钮触发，弹出一个 div 的 innerWidth 值。div 的 CSS 设置了 width:500px 和 padding:10px，所以 innerWidth 应该是 500 + 10×2 = 520。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerWidth 基础示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid #2471a3;background-color:#d4e6f1;">
学习 jQuery innerWidth 方法
</div>
<br>
<button id="getInnerWidthBtn">获取 innerWidth</button>
<script>
$(document).ready(function(){
$("#getInnerWidthBtn").click(function(){
alert("div 的 innerWidth 为：" + $("div").innerWidth() + "px");
});
});
</script>
</body>
</html>
弹出的结果是 520，验证了 innerWidth = 内容宽度 + 左右 padding。border 的那 1px 没有被算进去，margin 也没有。
进阶示例：不同内边距下的对比
下面这个例子放了四个宽度相同但 padding 递增的方块，点击任意一个就能看到它的 innerWidth 值。通过对比可以直观感受到 padding 如何影响 innerWidth。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerWidth 对比示例</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.box {
margin: 10px;
border: 2px solid #555;
width: 60px;
height: 30px;
cursor: pointer;
}
#box1 { padding: 10px; background-color: #e67e22; }
#box2 { padding: 20px; background-color: #2ecc71; }
#box3 { padding: 30px; background-color: #8e44ad; color: #fff; }
#box4 { padding: 40px; background-color: #c0392b; color: #fff; }
#info {
margin-top: 15px;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<p>点击任意方块查看其 innerWidth：</p>
<div id="box1" class="box">padding:10</div>
<div id="box2" class="box">padding:20</div>
<div id="box3" class="box">padding:30</div>
<div id="box4" class="box">padding:40</div>
<div id="info"></div>
<script>
$(document).ready(function(){
$("div.box").click(function(){
var bgColor = $(this).css("background-color");
var iw = $(this).innerWidth();
$("#info").html("当前方块的 innerWidth 是 <span style='color:" + bgColor + ";'>" + iw + "px</span>。");
});
});
</script>
</body>
</html>
四个方块的 CSS 宽度都是 60px，但 padding 从 10px 递增到 40px，innerWidth 依次为 80、100、120、140。这里有个细节值得注意：border 都设了 2px，但 innerWidth 没有被 border 影响。如果需要把 border 也算进去，那就要用 outerWidth() 了。
什么时候用 innerWidth 而不是 width()
我的个人经验是，在做以下操作时优先用 innerWidth()：
-
计算输入框内部可用空间（input 的 padding 会影响文字显示区域）
-
判断子元素是否能放入父容器（父容器有 padding 时，子元素的宽度限制应该是父容器的 innerWidth）
-
做自定义滚动条或进度条时，需要知道轨道内部的真实长度
反过来，如果只是读取或设置元素本身的内容宽度，不关心 padding，直接用 width() 更直接。两者选错的时候，往往表现为“数值对不上但差得不多”，这种情况排查起来会很耗时间，所以一开始就把概念分清很重要。
本节课程知识要点
-
innerWidth()的计算公式是 内容宽度 + 左右 padding，不包含 border 和 margin。 -
innerWidth()只能获取值，不能设置。要改变 innerWidth，需通过修改width或padding来实现。 -
与
width()的区别：width()只看内容区，innerWidth()多算了 padding。与outerWidth()的区别：outerWidth()还包含 border。 -
如果元素没有设置 padding，
innerWidth()和width()的返回值是一样的，这时候用哪个差别不大。 -
获取值返回的是纯数字，不带单位，方便做算术运算和条件判断。
jQuery 的尺寸方法体系里，innerWidth() 处于内容宽度和完整盒模型宽度之间的一个中间层次。它比 width() 更贴近肉眼看到的区域，又比 outerWidth() 少了边框的干扰。在需要计算元素内部可用空间的场景下，这个方法是比较精准的选择。配合 width() 和 outerWidth() 一起理解，jQuery 这套尺寸相关的方法就能形成一个完整清晰的知识结构。
