即使沒有定義 CSS 高度規則，如何在 jQuery 中檢索 div 元素的高度？

如何在沒有CSS 高度規則的情況下檢索Div 的高度

當您需要確定元素的高度時可能會令人沮喪，但是沒有定義CSS 高度規則。不過，不用擔心！ jQuery 提供了一個解決方案。

利用 jQuery 的 Height() 方法

與您可能假設的相反，jQuery 的 .height() 方法不需要預先定義的 CSS 高度規則。它計算元素的渲染高度，同時考慮其計算的樣式。這使得即使在沒有明確設定高度的情況下它也是一種有效的方法。

了解高度運算選項

jQuery 提供了幾種高度運算方法來滿足您的特定需求：

• .height() ：傳回元素的高度，不包括內邊距、邊框和邊距。
• .innerHeight()：傳回包含內邊距但不包含邊框和邊距的高度。
• .outerHeight()：傳回高度，包括邊框，但不包含邊距。
• .outerHeight(true)：傳回高度，包含邊距和所有裝飾。

現場示範

以下程式碼片段示範了不同的高度運算方法：

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest
    .html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

此程式碼建立一個高度為180px 、內邊距為10px 的div ，邊距10px，藍色邊框。然後它顯示使用每種方法計算出的高度。您可以在瀏覽器控制台中檢查渲染結果。

以上是即使沒有定義 CSS 高度規則，如何在 jQuery 中檢索 div 元素的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！