当前位置：首页 > jquery

jquery获取高度

2026-01-16 15:08:31jquery

jQuery获取元素高度的方法

使用jQuery可以方便地获取元素的高度，以下是几种常见的方法：

获取元素的实际高度（包括padding但不包括border和margin）

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

获取元素的内部高度（包括padding和border）

jquery获取高度

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

获取元素的外部高度（包括padding、border和margin）

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

获取元素的外部高度（包括padding和border，但不包括margin）

jquery获取高度

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

获取窗口的高度

var windowHeight = $(window).height();

获取文档的高度

var documentHeight = $(document).height();

注意事项

使用height()方法返回的是数值类型，单位是像素。
如果需要获取包含margin的高度，使用outerHeight(true)。
这些方法也可以用于设置高度，例如$('#element').height(200)将元素高度设置为200px。

示例代码

$(document).ready(function() {
    // 获取div的实际高度
    var divHeight = $('#myDiv').height();
    console.log('Div height: ' + divHeight + 'px');

    // 获取窗口高度
    var winHeight = $(window).height();
    console.log('Window height: ' + winHeight + 'px');
});