為什麼 jQuery 的 height() 和 width() 會傳回隱藏元素的值？

jQuery：隱藏元素和維度屬性

與常見假設相反，具有display:none 的元素並不總是為jQuery 的高度返回0 () 和width() 方法。這種與預期的偏差一直是程式設計師中揮之不去的困惑的主題。

揭開謎底

差異源自於 jQuery 處理具有 display:none 樣式的元素的方式。當元素的偏移寬度為0 時，表示它被有效隱藏，jQuery 會嘗試使用內部計算來確定其高度：

1. 暫時轉換： 它暫時修改元素的高度使用jQuery.swap() 的CSS 屬性：

   • 將位置設為「絕對」
   • 將可見性設為「隱藏」
   • 將顯示設為「區塊」
2. 高度測量：透過這些更改，它使用getWidthOrHeight(...) 取得高度。
3. 屬性恢復：最後，它將 CSS 屬性恢復為先前的值，從而再次有效地隱藏元素。

整個過程在 UI 執行緒更新之前無縫發生，在檢索其尺寸的同時保留元素的隱藏狀態。透過使 display:none 元素可透過 height() 和 width() 訪問，jQuery 確保無論其可見狀態如何，都可以執行涉及其尺寸的計算。

以上是為什麼 jQuery 的 height() 和 width() 會傳回隱藏元素的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！