当前位置：首页 > jquery

jquery获取div的高度

2026-02-04 03:50:02jquery

获取 div 的高度

使用 jQuery 获取 div 的高度可以通过以下几种方法实现：

方法一：使用 height() 方法

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

height() 方法返回元素的纯高度，不包括内边距（padding）、边框（border）和外边距（margin）。

方法二：使用 innerHeight() 方法

jquery获取div的高度

var divInnerHeight = $('#yourDivId').innerHeight();

innerHeight() 方法返回元素的高度，包括内边距（padding），但不包括边框（border）和外边距（margin）。

方法三：使用 outerHeight() 方法

var divOuterHeight = $('#yourDivId').outerHeight();

outerHeight() 方法返回元素的高度，包括内边距（padding）和边框（border），但不包括外边距（margin）。如果需要包括外边距，可以传递 true 作为参数：

jquery获取div的高度

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

方法四：使用 CSS height 属性

var divCssHeight = $('#yourDivId').css('height');

css('height') 方法返回元素的 CSS 高度值，可能带有单位（如 px）。如果需要数值，可以使用 parseInt() 或 parseFloat() 进行转换：

var divHeightValue = parseInt($('#yourDivId').css('height'), 10);

注意事项

确保在 DOM 完全加载后再执行 jQuery 代码，可以将代码放在 $(document).ready() 中：

$(document).ready(function() {
  var divHeight = $('#yourDivId').height();
  console.log(divHeight);
});

如果 div 是隐藏的（display: none），height() 方法可能返回 0。可以通过临时显示元素或使用其他方法获取高度。

示例代码

以下是一个完整的示例，展示如何获取 div 的高度并在控制台输出：

$(document).ready(function() {
  var divHeight = $('#yourDivId').height();
  var divInnerHeight = $('#yourDivId').innerHeight();
  var divOuterHeight = $('#yourDivId').outerHeight();
  var divOuterHeightWithMargin = $('#yourDivId').outerHeight(true);

  console.log('Height:', divHeight);
  console.log('Inner Height:', divInnerHeight);
  console.log('Outer Height:', divOuterHeight);
  console.log('Outer Height with Margin:', divOuterHeightWithMargin);
});