為什麼 jQuery 的 `height()` 和 `width()` 對於具有 `display:none` 的元素會傳回非零值？

jQuery 的非傳統Height() 和Width() 行為與「display:none」

jQuery 的height() 和width( ) 方法是廣泛用於確定網頁上元素的可見尺寸。然而，在處理設定了 CSS 屬性「display:none」的元素時，似乎會出現意外的行為。

問題

傳統上，人們相信具有「display:none」的元素的高度和寬度為零。然而，jQuery 的情況並非總是如此。考慮以下範例：

<code class="html"><div id="target" style="display:none;">
  a
</div></code>

<code class="css">alert($("#target").height());</code>

在此範例中，「目標」元素的高度不為零，而是一個非零值。這種不一致引發了一個問題：為什麼帶有「display:none」的元素有時會在 jQuery 中傳回非零高度和寬度？

答案

要理解這種行為，我們需要深入研究 jQuery 的 height() 和 width() 方法的內部運作原理。當元素的可見 offsetWidth 為 0（表示它是「隱藏」）時，jQuery 會嘗試計算其實際尺寸。它透過暫時覆寫元素的CSS 屬性來實現此目的：

• position: "absolute"
• visibility: "hidden"
• display: "block"

透過這些修改，jQuery 會檢索元素的高度，並根據需要考慮邊框和填充。一旦確定了高度，jQuery 就會恢復原始的 CSS 屬性，確保不會發生可見的變更。

此程序允許 height() 和 width() 對於隱藏元素正確工作，只要它們的父元素可見。本質上，jQuery 模擬了在文件流程之外顯示元素、檢索其尺寸，然後再次隱藏它的行為，所有這些都在幕後透過單一操作完成。這消除了開發人員手動顯示和隱藏元素來獲取其尺寸的需要。

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