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

outerHeight() 是 jQuery 六种尺寸方法里的之后一个，和 outerWidth() 对应，负责垂直方向的完整盒模型高度计算。它的计算范围是内容高度 + 上下 padding + 上下 border。如果加上 true 参数，还会把上下 margin 也包含进来。

到了这一篇，jQuery 的尺寸方法体系就完整了。从 height() 到 innerHeight() 再到 outerHeight()，覆盖范围层层递进，分别对应内容区、加内边距、加边框、加外边距四个层面。把这六个方法（宽高各三个）的关系理清楚，前端布局中需要用 JS 获取或设置元素尺寸的场景基本都能应对。

语法形式

$(selector).outerHeight(includeMargin)

includeMargin 是可选布尔参数，默认 false。传 true 后，返回值会在内容高度 + padding + border 的基础上再加入上下 margin。

和 outerWidth() 一样，outerHeight() 主要用于获取值，但它也支持设置操作，这个特性在第二个示例里会演示。

基础示例：获取 outerHeight

这个示例和前几篇保持统一风格，点击按钮弹出一个 div 的 outerHeight。div 的 CSS 设置了 height:100px、padding:10px、border:1px，所以 outerHeight 应该是 100 + 10×2 + 1×2 = 122。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>outerHeight 基础示例</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:#d6eaf8;">
        学习 jQuery outerHeight 方法
    </div>
    <br>
    <button id="getOuterHeightBtn">获取 outerHeight</button>

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

结果是 122。对比之前 innerHeight() 返回的 120，多出来的 2 正好是上下两条 1px 的 border。margin 的 3px 没被计入，因为没传 true。如果改成 $("div").outerHeight(true)，结果会是 122 + 3×2 = 128。

进阶示例：动态改变 outerHeight

下面这个示例展示了 outerHeight() 的设置用法。五个橙色柱形块，点击任意一个后用 outerHeight() 给它设置新的总高度，同时改变样式标记已点击状态。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>outerHeight 设置示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .column {
            width: 60px;
            padding: 10px;
            height: 100px;
            float: left;
            margin: 5px;
            background: #e67e22;
            cursor: pointer;
            text-align: center;
            color: #fff;
            font-weight: bold;
        }
        .column-changed {
            background: #27ae60;
            cursor: default;
        }
    </style>
</head>
<body>
    <div class="column">A</div>
    <div class="column">B</div>
    <div class="column">C</div>
    <div class="column">D</div>
    <div class="column">E</div>

    <script>
        var stepHeight = 80;
        $("div.column").one("click", function(){
            $(this).outerHeight(stepHeight).addClass("column-changed");
            stepHeight -= 8;
        });
    </script>
</body>
</html>

五个柱形块的初始 CSS 高度都是 100px，padding 各 10px，没有设置 border（默认 0），所以初始 outerHeight 是 120。stepHeight 从 80 开始依次递减 8，点击后各块的 outerHeight 变为 80、72、64、56、48。jQuery 会自动反推需要的内容高度：outerHeight 减去 padding 后剩下的值赋给 height。第一个被点击的块，内容高度被调整为 60（80 - 10×2）。

这种设置方式在做柱状图交互时很方便——你直接指定柱子的“总外观高度”，不用手动扣减 padding。不过个人在项目里还是习惯用 height() 配合 CSS 的 box-sizing: border-box 来控制，逻辑更直接。outerHeight() 设置值这种做法了解即可，遇到需要直接指定总高度的特殊场景时知道有这个选项。

jQuery 六种尺寸方法完整对比

到此为止，jQuery 的六个尺寸方法全部讲完了。把它们放在一张表里对比，各自的计算范围一目了然：

方法	内容区	+padding	+border	+margin
`width()` / `height()`	✓
`innerWidth()` / `innerHeight()`	✓	✓
`outerWidth()` / `outerHeight()`	✓	✓	✓
`outerWidth(true)` / `outerHeight(true)`	✓	✓	✓	✓

这张表值得记下来。实际写代码时，先想清楚自己需要的是哪个层级的尺寸，然后直接选对应的方法，不用每次都去翻文档确认计算范围。

隐藏元素也能正常取值

outerHeight() 和 outerWidth() 一样，对隐藏元素同样有效。如果元素设置了 display:none，用 height() 会拿到 0，但 outerHeight() 仍然能返回正确的计算值。这个特性在需要预先获取隐藏元素尺寸再决定是否展示的场景里很关键，比如折叠面板展开前的动画计算、懒加载图片的占位高度预设等。

本节课程知识要点

outerHeight() 返回内容高度 + 上下 padding + 上下 border，默认不含 margin。
传 true 后 outerHeight(true) 会把上下 margin 一并计入，得到元素在页面上占据的完整垂直空间。
对隐藏元素同样有效，不像 height() 在元素隐藏时返回 0。
语法上 outerHeight(value) 可以设置总高度，jQuery 会自动反推内容高度，但日常获取是主要用法。
六个尺寸方法覆盖了从内容区到完整盒模型的全部计算维度，根据场景精准选择可以减少布局计算错误。

jQuery 的尺寸方法体系到这里就完整了。从最基础的 width() 和 height()，到加上 padding 的 innerWidth() 和 innerHeight()，再到包含 border 并可选择包含 margin 的 outerWidth() 和 outerHeight()，六个方法构成了一个层次分明的工具集。前端布局中凡是需要用 JS 处理元素尺寸的需求，这套方法基本都能覆盖。把它们的计算边界记清楚，写代码时就能少踩很多尺寸计算方面的坑。

本文标签：

jQuery outerHeight()方法：包含边框的完整高度