在沒有定義 CSS 高度規則的情況下如何取得 Div 的高度？

如何使用未定義的CSS 高度規則檢索Div 的高度

在沒有明確CSS 高度規則的情況下確定元素的高度規則可以是具有挑戰性的。但是，可以使用 jQuery JavaScript 函式庫提供的方法。

jQuery .height 方法

與最初的假設相反，jQuery .height() 方法確實不需要預先定義的 CSS 高度規則。它根據目前樣式檢索元素的計算高度。此方法預設不包括 padding、border 和 margin。

其他選項

除了.height() 之外，還可以使用以下方法：

• .innerHeight() ：傳回包含內邊距但不包含邊框和邊距的高度。
• .outerHeight()：傳回包含邊框但不包含邊框的高度。不包括邊距。
• .outerHeight(true)：傳回包含邊距的高度。

範例

考慮以下HTML 和jQuery 程式碼：

<code class="html"><div id="heightTest"></div>

<script>
  $(function() {
    var $heightTest = $('#heightTest');
    $heightTest.html('This is the test div.');

    console.log('Height (.height() returns): ', $heightTest.height());
    console.log('Inner Height (.innerHeight() returns): ', $heightTest.innerHeight());
    console.log('Outer Height (.outerHeight() returns): ', $heightTest.outerHeight());
    console.log('Outer Height (.outerHeight(true) returns): ', $heightTest.outerHeight(true));
  });
</script></code>

輸出🎜>

結論

Height (.height() returns): 18px
Inner Height (.innerHeight() returns): 56px
Outer Height (.outerHeight() returns): 58px
Outer Height (.outerHeight(true) returns): 88px

jQuery 方法提供了一種方便的方法檢索元素高度的方法，無論是否定義了CSS 高度規則。此功能對於動態 Web 元件和佈局調整非常有價值。

以上是在沒有定義 CSS 高度規則的情況下如何取得 Div 的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！