jQuery outerWidth()方法：包含边框的完整宽度-代码号

讲完了 width() 和 innerWidth()，现在来看 jQuery 尺寸方法家族里覆盖范围更大的一个——outerWidth()。这个方法返回的是 内容宽度 + 左右 padding + 左右 border，也就是 CSS 盒模型里从 border 内侧到对边 border 内侧的完整宽度。

outerWidth() 还有一个很实用的特性：它自带一个可选参数 includeMargin，传 true 就能把 margin 也加进来。这意味着用这一个方法就能获取元素在页面上占据的真实水平空间，不用再手动去加 border 和 margin 的值。

另一个容易被忽略的点是，outerWidth() 对隐藏元素同样有效。隐藏元素用 width() 取到的值是 0，但 outerWidth() 仍能返回正确的计算值。在做一些需要预先计算隐藏元素尺寸再显示的场景里，这个特性非常有用。

语法形式

$(selector).outerWidth(includeMargin)

includeMargin 是可选参数，布尔值，默认 false。设成 true 后，返回值会在原有基础上再加上左右 margin。

跟 innerWidth() 一样，outerWidth() 只能获取值，不能设置宽度。这个限制是合理的——outerWidth 由多个 CSS 属性共同决定，无法通过一个方法直接赋值。

基础示例：获取 outerWidth

下面这个例子和前几篇的结构保持一致，点击按钮弹出一个 div 的 outerWidth。div 设置了 width:500px、padding:10px、border:1px，所以 outerWidth 应该是 500 + 10×2 + 1×2 = 522。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>outerWidth 基础示例</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 #1a5276;background-color:#d4e6f1;">
        学习 jQuery outerWidth 方法
    </div>
    <br>
    <button id="getOuterWidthBtn">获取 outerWidth</button>

    <script>
        $(document).ready(function(){
            $("#getOuterWidthBtn").click(function(){
                alert("div 的 outerWidth 为：" + $("div").outerWidth() + "px");
            });
        });
    </script>
</body>
</html>

弹出的结果是 522。和之前 innerWidth() 返回的 520 相比多了 2，正好是左右两条 1px 的 border。margin 的 3px 没有被算进去，因为参数默认是 false。

进阶示例：对比不同参数的效果

下面这个示例放了四个宽度相同但 margin、padding、border 各不相同的方块。点击任意一个显示它的 outerWidth，并且把 includeMargin 设为 true，这样 margin 也会被包含进来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>outerWidth 含 margin 示例</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
        .square {
            width: 60px;
            height: 30px;
            cursor: pointer;
            margin-bottom: 8px;
        }
        #sq1 { margin:10px; padding:10px; border:2px solid #555; background-color:#e67e22; }
        #sq2 { margin:15px; padding:15px; border:4px solid #555; background-color:#2ecc71; }
        #sq3 { margin:20px; padding:20px; border:6px solid #555; background-color:#8e44ad; color:#fff; }
        #sq4 { margin:25px; padding:25px; border:8px solid #555; background-color:#c0392b; color:#fff; }
        #info {
            margin-top: 15px;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>点击任意方块查看其 outerWidth（含 margin）：</p>
    <div id="sq1" class="square"></div>
    <div id="sq2" class="square"></div>
    <div id="sq3" class="square"></div>
    <div id="sq4" class="square"></div>
    <div id="info"></div>

    <script>
        $(document).ready(function(){
            $("div.square").click(function(){
                var bgColor = $(this).css("background-color");
                var ow = $(this).outerWidth(true);
                $("#info").html("当前方块的 outerWidth（含 margin）是 <span style='color:" + bgColor + ";'>" + ow + "px</span>。");
            });
        });
    </script>
</body>
</html>

四个方块的内容宽度都是 60px，计算一下各自 outerWidth(true) 的结果：

sq1：60 + 10×2(padding) + 2×2(border) + 10×2(margin) = 104
sq2：60 + 15×2 + 4×2 + 15×2 = 128
sq3：60 + 20×2 + 6×2 + 20×2 = 152
sq4：60 + 25×2 + 8×2 + 25×2 = 176

点击每个方块，弹出的数字会跟这些计算值一一对应。亲手验证一遍，对理解 outerWidth() 的计算规则比光看文档要深刻得多。

outerWidth 的实际应用场景

日常开发中，outerWidth() 用得比较多的几个场景：

做拖拽排序时计算占位宽度：需要知道元素在页面上实际占了多少水平空间，含 margin 才能算准间距。
动态定位弹出层：比如 tooltip 或下拉菜单，要相对于触发元素定位，需要知道触发元素的完整外宽。
滚动容器内计算总宽度：当容器里有多个横向排列的元素，需要累加每个元素的 outerWidth(true) 来确定是否溢出。
隐藏元素的尺寸预计算：前面提到隐藏元素用 width() 返回 0，但 outerWidth() 可以正常工作。在需要先计算尺寸再决定是否显示的场景里，这个方法帮了大忙。

width、innerWidth、outerWidth 三者对比

把水平方向的三个方法放在一起看，它们的关系很清楚：

方法	内容宽度	+padding	+border	+margin
`width()`	✓
`innerWidth()`	✓	✓
`outerWidth()`	✓	✓	✓
`outerWidth(true)`	✓	✓	✓	✓

这个表记熟了，遇到任何需要获取宽度的情况都能迅速选出正确的方法。

本节课程知识要点

outerWidth() 返回内容宽度 + 左右 padding + 左右 border，默认不含 margin。
传入 true 参数后，outerWidth(true) 会把左右 margin 一并计算在内。
该方法对隐藏元素同样有效，不像 width() 在元素隐藏时返回 0。
outerWidth() 只能获取值，不能设置。这是它和 width() 的一个重要区别。
在需要获取元素在页面上实际占据的水平空间时，优先考虑 outerWidth(true)，避免自己手动累加各种属性值。

outerWidth() 是 jQuery 尺寸方法里覆盖范围较大的一个。从 width() 到 innerWidth() 再到 outerWidth()，覆盖范围逐步扩大，分别对应内容区、加内边距、加边框、加外边距四个层次。把这个体系串起来理解，前端布局相关的 JS 计算就能减少很多调试时间。垂直方向的 outerHeight() 逻辑一致，下一篇接着聊。

本文标签：

jQuery outerWidth()方法：包含边框的完整宽度