jQuery height()和innerHeight()方法

jQuery中的height()方法和innerHeight()方法都可以用来获取元素的高度，但是它们具有不同的计算方式和结果。

height()方法

height()方法返回的是元素的内容高度（不包括padding、border和margin），可以通过以下方式使用：

$(selector).height();

以下是一个示例：

<div id="myDiv" style="height: 100px; padding: 20px; border: 2px solid black; margin: 10px;">
  This is some content.
</div>

// 获取myDiv元素的高度
var myDivHeight = $("#myDiv").height();
console.log(myDivHeight); // 输出100

innerHeight()方法

innerHeight()方法返回的是元素的内容高度加上内边距（padding），不包括边框和外边距。可以通过以下方式使用：

$(selector).innerHeight();

以下是一个示例：

<div id="myDiv" style="height: 100px; padding: 20px; border: 2px solid black; margin: 10px;">
  This is some content.
</div>

// 获取myDiv元素的innerHeight
var myDivInnerHeight= $("#myDiv").innerHeight();
console.log(myDivInnerHeight); // 输出140

区别和应用场景

与height()方法相比，innerHeight()方法计算的高度包括内边距，可以用来计算元素实际占据的空间大小，比如在页面布局中将某个元素的高度设置为另一个元素的innerHeight。

<div id="myDiv1" style="height: 100px; padding: 20px; border: 2px solid black; margin: 10px;">
  This is some content.
</div>
<div id="myDiv2" style="height: auto; padding: 0; border: 0; margin: 0;">
  Another div.
</div>

// 设置myDiv2的高度为myDiv1的innerHeight
var myDivInnerHeight= $("#myDiv1").innerHeight();
$("#myDiv2").height(myDivInnerHeight);

有时候，需要获取页面中某个元素的实际高度，这时可以使用innerHeight()方法。

<div id="myDiv" style="height: auto; padding: 20px; border: 2px solid black; margin: 10px;">
  This is some content.
</div>

// 获取myDiv元素的实际高度
var myDivActualHeight = $("#myDiv").innerHeight() + parseInt($("#myDiv").css('margin-top')) + parseInt($("#myDiv").css('margin-bottom'));
console.log(myDivActualHeight); // 输出144

最后需要注意的是，当元素设置了box-sizing: border-box时，height()方法将返回实际高度（包括padding和border），而innerHeight()方法将返回实际高度减去边框厚度。