当前位置：首页 > jquery

jquery获取div高度

2026-03-16 18:28:36jquery

使用 jQuery 获取 div 高度的方法

获取 div 的实际高度（包括 padding 和 border）

通过 outerHeight() 方法可以获取 div 的实际高度，包括 padding 和 border。如果需要包含 margin，可以传递 true 作为参数。

var heightWithPaddingBorder = $('#yourDivId').outerHeight();
var heightWithMargin = $('#yourDivId').outerHeight(true);

获取 div 的内容高度（不包括 padding 和 border）

使用 height() 方法可以获取 div 的内容高度，不包括 padding 和 border。

var contentHeight = $('#yourDivId').height();

获取 div 的滚动高度

如果需要获取 div 的滚动高度（即内容的总高度，包括溢出部分），可以通过 prop('scrollHeight') 实现。

var scrollHeight = $('#yourDivId').prop('scrollHeight');

动态监听 div 高度变化

通过 resize 事件可以监听 div 高度变化。需要注意的是，div 本身不会触发 resize 事件，通常需要结合窗口或其他元素的监听。

$(window).resize(function() {
    var currentHeight = $('#yourDivId').height();
    console.log('Current height:', currentHeight);
});

示例代码

以下是一个完整的示例代码，展示如何获取和监听 div 高度：

jquery获取div高度

$(document).ready(function() {
    // 获取内容高度
    var contentHeight = $('#yourDivId').height();
    console.log('Content height:', contentHeight);

    // 获取实际高度（包括 padding 和 border）
    var outerHeight = $('#yourDivId').outerHeight();
    console.log('Outer height:', outerHeight);

    // 监听窗口变化以更新高度
    $(window).resize(function() {
        var updatedHeight = $('#yourDivId').height();
        console.log('Updated height:', updatedHeight);
    });
});