用 jQuery 轻松获取元素高度：详解 3 种方法与应用场景

前言

在网页开发中，我们常常需要获取元素的高度来调整布局或实现特定功能。jQuery 提供了 3 种方法来获取元素高度：

• height()
• innerHeight()
• outerHeight()

这 3 种方法各有其特点和应用场景，本文将详细介绍它们的用法和区别，帮助您轻松掌握 jQuery 的元素高度获取技巧。

height()：获取元素内容高度

height() 方法获取元素内容的高度，包括元素的填充（padding）和边框（border），但不包括元素的边距（margin）。

$(selector).height();

例如，以下代码获取元素 #element 的高度：

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

如果元素 #element 的内容高度为 100px，填充为 10px，边框为 5px，那么 height() 方法将返回 115px。

innerHeight()：获取元素内部高度

innerHeight() 方法获取元素内部的高度，包括元素的填充（padding），但不包括元素的边框（border）和边距（margin）。

$(selector).innerHeight();

例如，以下代码获取元素 #element 的内部高度：

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

如果元素 #element 的内部高度为 100px，填充为 10px，边框为 5px，那么 innerHeight() 方法将返回 110px。

outerHeight()：获取元素外部高度

outerHeight() 方法获取元素外部的高度，包括元素的内容（content）、填充（padding）、边框（border）和边距（margin）。

$(selector).outerHeight();

例如，以下代码获取元素 #element 的外部高度：

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

如果元素 #element 的外部高度为 100px，填充为 10px，边框为 5px，边距为 10px，那么 outerHeight() 方法将返回 125px。

应用场景

这 3 种方法各有其应用场景，具体如下：

• height()：用于获取元素内容的高度，常用于计算元素的实际高度或调整元素的布局。
• innerHeight()：用于获取元素内部的高度，常用于计算元素的可用空间或调整元素内部的内容。
• outerHeight()：用于获取元素外部的高度，常用于计算元素的总高度或调整元素的外观。

总结

jQuery 提供了 3 种方法来获取元素高度：height()、innerHeight() 和 outerHeight()。这 3 种方法各有其特点和应用场景，掌握它们的使用技巧可以帮助您轻松实现各种网页布局和功能。