為什麼 jQuery 的 `height()` 和 `width()` 函數回傳帶有 `display: none` 的元素值？

jQuery：height()/width() vs. "display:none"

您可能假設具有CSS 樣式的元素在jQuery中，「display:none」的height() 和width() 將會回傳0。然而，正如提供的示例所示，情況並非總是如此。

為什麼會發生這種情況？為了理解這種行為，我們需要深入研究 jQuery 如何處理隱藏元素。

如果元素的 offsetWidth 為 0（jQuery 將其解釋為「隱藏」），它會嘗試確定其高度。它透過暫時改變元素的樣式來實現此目的：

• 位置：「絕對」
• 可見性：「隱藏」
• 顯示：「區塊」

一旦透過getWidthOrHeight(...) 取得高度並根據需要調整邊框和填充，就會恢復之前的樣式。

本質上，jQuery 會取得隱藏元素，暫時顯示它在文件流之外，檢索其高度，然後再次隱藏它，所有這些都不會影響頁面的視覺外觀。這使得 height() 和 width() 甚至可以為隱藏元素提供準確的測量，前提是它們的父元素可見。

此機制內建於 jQuery 的 height() 和 width() 方法中，消除了您的需要手動操作元素的可見性。

以上是為什麼 jQuery 的 `height()` 和 `width()` 函數回傳帶有 `display: none` 的元素值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！