jquery获取元素高度

获取元素高度的方法

使用jQuery获取元素高度可以通过多种方式实现，具体取决于需求（如是否包含内边距、边框或外边距）。

获取内容高度（不包含padding和border）

使用height()方法可以获取元素的内容高度：

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

获取包含内边距的高度

使用innerHeight()方法获取内容高度+内边距（padding）：

var innerHeight = $('#element').innerHeight();

获取包含边框的高度

使用outerHeight()方法获取内容高度+内边距+边框（border）。默认不包含外边距（margin）：

var outerHeight = $('#element').outerHeight();

获取包含外边距的高度

通过outerHeight(true)参数可以额外包含外边距（margin）：

var totalHeight = $('#element').outerHeight(true);

注意事项

• 以上方法返回的是数值（单位：像素），不带px后缀。
• 如果元素隐藏（display: none），返回值可能为0，需确保元素可见。
• 对于window或document对象，应使用$(window).height()或$(document).height()。

动态内容的高度监听

若元素高度因动态内容变化，可通过事件或定时器重新获取：

$(window).on('resize', function() {
    console.log($('#element').height());
});

以上方法覆盖了大多数常见场景，可根据实际需求选择合适的方式。