首頁  >  文章  >  web前端  >  如何在沒有顯式 CSS 高度規則的情況下確定 jQuery 中的元素高度?

如何在沒有顯式 CSS 高度規則的情況下確定 jQuery 中的元素高度?

Barbara Streisand
Barbara Streisand原創
2024-11-01 14:49:29616瀏覽

How to Determine Element Height in jQuery Without Explicit CSS Height Rules?

在沒有CSS 高度規則的情況下確定元素的高度

在元素沒有CSS 高度規則的情況下,獲取元素的高度可能會很困難它的高度。 jQuery .height() 方法需要預先定義的 CSS 高度值,在這種情況下似乎不夠。但是,還有其他方法可以確定元素的高度。

jQuery .height()

與普遍看法相反,jQuery .height() 不依賴關於 CSS 高度定義。它計算元素的計算高度,使其適合沒有明確指定 CSS 高度的場景。

DEMO

.height():檢索元素的高度沒有 padding、border 或 margin。

.innerHeight():檢索元素的高度,包括 padding,但不包括 border 和 margin。

.outerHeight():檢索元素的高度,包括 border 但不包括margin.

.outerHeight(true):檢索元素的高度,包括邊框和邊距。

現場示範的程式碼片段

<code class="js">$(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>')
});</code>

以上是如何在沒有顯式 CSS 高度規則的情況下確定 jQuery 中的元素高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn