jQuery innerHeight()方法：包含内边距的高度计算-代码号

innerHeight() 是 jQuery 尺寸方法家族里跟 innerWidth() 对应的垂直方向版本。它的计算逻辑和 innerWidth() 一致，只是一个管宽度，一个管高度。如果你已经理解了 innerWidth()，那么 innerHeight() 几乎不需要额外学习成本，把宽高的概念切换一下就行。

这个方法返回的是内容高度 + 上下 padding，border 和 margin 都不在计算范围内。对比之前讲过的 height()，height() 只看内容区，innerHeight() 多算了上下内边距。这个差异在元素有较大 padding 时会使两个方法的返回值相差很多，选错方法的话，数值会明显对不上。

语法形式

$(selector).innerHeight()

和 innerWidth() 一样，innerHeight() 只能获取值，不能用来设置高度。这一点跟 height() 有本质区别——height(value) 可以设值，但 innerHeight() 没有设置参数。因为 innerHeight 是一个推导值，由内容高度和 padding 共同决定，要调整它只能通过改变 height 或 padding。

基础示例：获取 innerHeight

下面这个例子跟前面讲 innerWidth() 时的结构类似，点击按钮弹出一个 div 的 innerHeight 值。div 设置了 height:100px 和 padding:10px，innerHeight 应该是 100 + 10×2 = 120。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>innerHeight 基础示例</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 innerHeight 方法
    </div>
    <br>
    <button id="getInnerHeightBtn">获取 innerHeight</button>

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

运行后弹出的数字是 120。这跟 CSS 写的 100px 高度加上上下各 10px 的 padding 吻合。border 那 1px 没有被计入，margin 也没有。如果你需要连 border 一起算，应该换 outerHeight()。

进阶示例：动态改变 innerHeight

第二个例子展示了 innerHeight() 的一个特殊用法——它其实可以接受参数来设置高度。注意看代码里 $(this).innerHeight(modHeight) 这种写法。这在开发中不太常见，但知道它有这个能力没坏处。设置 innerHeight 时，jQuery 会自动反推需要的内容高度，减去当前 padding 后把剩余值赋给 height 属性。

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

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

五个柱形块初始 CSS 高度都是 100px，padding 各 10px，所以初始 innerHeight 是 120。点击后 stepHeight 从 80 开始赋值，依次递减 8。第一个被点击的 innerHeight 变为 80，实际内容高度被 jQuery 自动调整为 60（因为 80 - 10×2 = 60）。之后依次是 72、64、56、48。

这种用法在制作可点击调整的柱状图、音量条或进度指示器时很顺手，因为你可以直接指定最终的可视高度，不用手动去减 padding。

innerHeight 和 height 该怎么选

实际项目里，我很少用 innerHeight() 去设置值，更多是用它来获取高度做布局判断。理由很简单——设置值的时候直接用 height() 语义更明确，配合 CSS 的 box-sizing: border-box 处理起来也更直观。但获取高度时，如果需要知道元素内部可用的垂直空间（比如一个带 padding 的滚动容器里内容区域的实际高度），innerHeight() 就比 height() 更贴切。

常见的使用场景包括：

计算弹窗内容区高度，决定是否显示滚动条
判断列表容器能否容纳所有列表项
动态调整文本区域大小以适应内容

本节课程知识要点

innerHeight() 的计算公式是内容高度 + 上下 padding，不包含 border 和 margin。
获取值时返回纯数字，不带 px 单位，方便参与数值计算。
虽然语法上 innerHeight(value) 可以设置高度，但日常开发中获取是主要用法，设置时用 height() 更清晰。
跟 height() 的区别在于是否包含 padding；跟 outerHeight() 的区别在于是否包含 border。
元素没有设置 padding 时，innerHeight() 和 height() 返回值相同，这种情况下用哪个区别不大。

innerHeight() 在 jQuery 尺寸方法体系里的定位很清楚——它填补了内容高度和完整盒模型高度之间的空白。掌握了 width()、height()、innerWidth()、innerHeight() 这四个基础方法后，再加上后面会讲到的 outerWidth() 和 outerHeight()，就能在任何布局场景里准确获取和设置元素的尺寸了。理解它们各自的计算边界，是写出稳定布局代码的基本功。

本文标签：

jQuery innerHeight()方法：包含内边距的高度计算

语法形式

基础示例：获取 innerHeight

进阶示例：动态改变 innerHeight

innerHeight 和 height 该怎么选

本节课程知识要点

感谢您的认可和支持