在沒有定義 CSS 高度的情況下如何決定 div 的高度？-css教學-PHP中文網

在沒有定義 CSS 高度的情況下如何決定 div 的高度？

DDD

發布： 2024-10-26 12:23:02

原創

896 人瀏覽過

How can I determine the height of a div without a defined CSS height?

在沒有定義CSS 高度的情況下確定Div 的高度

當沒有在CSS 中設定高度規則時，取得元素的高度規則可能會很困難CSS。這就是理解獲取高度的不同 jQuery 方法變得至關重要的地方。

與誤解相反，jQuery 的 .height() 方法不依賴定義的 CSS 高度規則。它決定計算的高度，其中包括元素的內容、填充和邊框。這使得它成為檢索元素實際高度的有效工具，無論 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>')
});

登入後複製

透過了解這些jQuery 方法，即使沒有定義CSS 高度規則，您也可以有效地取得元素的高度。

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