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

下面是关于jQuery height()、innerHeight()、outerHeight()函数的区别详解：

1. height函数

height()函数是jQuery用于获取或设置元素的高度的函数。它返回的是元素的内容高度，不包括边框、内边距和外边距。如果参数为空，该函数返回第一个匹配元素的高度。如果参数为一个函数，则该函数用于计算每一个匹配元素的高度。如果参数为一个数字，则所有匹配的元素的高度都将设置为该数字。以下是一个示例：

// 获取元素的内容高度
var contentHeight = $('div').height(); 

// 设置元素的高度为200px
$('div').height(200); 

// 设置元素的高度为该元素另一个元素的高度
$('div').height($('p').height()); 

2. innerHeight函数

innerHeight()函数是jQuery用于获取元素的高度（包括内边距）的函数。它返回元素内容的高度加上元素内边距的高度，但不包括边框和外边距。以下是一个示例：

// 获取元素的内容高度加上元素内边距的高度
var innerHeight = $('div').innerHeight(); 

3. outerHeight函数

outerHeight()函数是jQuery用于获取元素的高度（包括内边距、边框和外边距）的函数。它返回元素内容的高度加上元素内边距、边框和外边距的高度。以下是一个示例：

// 获取元素的内容高度加上元素内边距、边框和外边距的高度
var outerHeight = $('div').outerHeight(); 

综上所述，height()、innerHeight()、outerHeight()函数之间的区别在于它们所包含的高度不同。具体来说，height()只包含元素的内容高度，innerHeight()包含元素的内容高度和内边距高度，outerHeight()包含元素的内容高度、内边距高度、边框高度和外边距高度。

下面是一个通过height()、innerHeight()、outerHeight()函数设置元素高度的示例：

<div style="height: 100px; border: 1px solid black; padding: 10px; margin: 10px;">
  <p>Test</p>
</div>
<button onclick="setHeight()">Set Height</button>

<script>
function setHeight() {
  var div = $('div');
  var height = div.height();
  var innerHeight = div.innerHeight();
  var outerHeight = div.outerHeight();

  console.log('height: ' + height);
  console.log('innerHeight: ' + innerHeight);
  console.log('outerHeight: ' + outerHeight);

  div.height(height + 50);
  div.innerHeight(innerHeight + 50);
  div.outerHeight(outerHeight + 50);
}
</script>

当点击按钮时，我们会通过height()、innerHeight()、outerHeight()函数获取元素的高度并打印到控制台中。然后，我们会通过这些函数设置元素的高度增加50px。