jQuery height()、innerHeight()、outerHeight()函数的区别详

jQuery中的height()、innerHeight()和outerHeight()函数详解

在jQuery中，处理元素的高度时，我们常常会遇到三个函数：height()、innerHeight()和outerHeight()。同样，也有对应的宽度处理函数width()、innerWidth()和outerWidth()。本文将重点介绍这三个高度处理函数之间的区别。

为了更好地理解这些函数，我们可以借助HTML元素的盒模型来进行解释。

一、函数概述：

1. height(): 获取或设置元素的总高度（包括内容、内边距和边框）。

2. innerHeight(): 获取或设置元素内容区域的高度（包括内容区域和内部边距）。

3. outerHeight(): 获取或设置元素外部高度（包括内容、内边距和边框，但不包括外边距）。还有一个变种：outerHeight(true)，它还会包括外边距。

二、函数特性：

1. 只有height()函数可以用于window或document对象。

2. height()函数在版本1.4.1+中新增支持参数为函数的功能。

3. innerHeight()函数在版本1.8.0+开始支持参数为数值或函数。

三、使用示例：

假设我们有以下HTML元素：

```html

```

我们可以通过jQuery来获取这个元素的各种高度：

```javascript

var $ele = $("element");

// height()返回元素的总高度（包括内容、内边距和边框）

document.writeln($ele.height()); // 输出：100

// innerHeight()返回元素内容区域的高度（包括内容区域和内部边距）

document.writeln($elenerHeight()); // 输出：120（包括padding）

// outerHeight()返回元素的外部高度（包括内容、内边距和边框，不包括外边距）

document.writeln($ele.outerHeight()); // 输出：122（包括padding和border）

// outerHeight(true)返回元素的完全外部高度，包括外边距。

document.writeln($ele.outerHeight(true)); // 输出：由于包含margin，所以实际值会变化。在此示例中未设置具体的margin值，实际开发中需根据具体情况计算。

``` 需要注意的是，在使用这些函数时，要确保加载了jQuery库。若使用代码编辑器或测试框架时，别忘了加上对应的jQuery链接地址。理解这三个函数的区别和使用场景对于编写高效的jQuery代码至关重要。希望本文能为您在开发过程中提供有价值的参考。