jQuery | height() 和 innerHeight() 示例

在 jQuery 中，有两个常用方法来获取元素的高度，它们分别是 height() 和 innerHeight()。

height()

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

语法

$(selector).height()

示例

<div id="box" style="height: 100px; padding: 10px; border: 1px solid #ddd;">
  <p>Hello World</p>
</div>

<script>
  var boxHeight = $('#box').height();
  console.log(boxHeight); // 100
</script>

解释

上面的例子中，height() 方法返回了 #box 元素的高度，也就是 100。由于该元素具有 10px 的内边距和 1px 的边框，但没有外边距，所以 height() 方法返回的值是不包含内边距和边框的。

innerHeight()

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

语法

$(selector).innerHeight()

示例

<div id="box" style="height: 100px; padding: 10px; border: 1px solid #ddd;">
  <p>Hello World</p>
</div>

<script>
  var boxInnerHeight = $('#box').innerHeight();
  console.log(boxInnerHeight); // 120
</script>

解释

上面的例子中，innerHeight() 方法返回了 #box 元素的高度，也就是 120。由于该元素具有 10px 的内边距和 1px 的边框，所以 innerHeight() 方法返回的值是包含内边距的，但不包含边框和外边距。

注意，如果没有指定内边距（padding），则 height() 方法和 innerHeight() 方法返回的值相同。

以上是关于 jQuery 中 height() 和 innerHeight() 两个方法的介绍和示例。需要注意的是，在使用这两个方法时，要根据实际情况选择使用哪一个，以避免出现错误。