使用 jQuery 檢索隱藏元素的高度

使用隱藏元素時，可能需要出於各種目的檢索其尺寸。然而，如果元素不可見，獲取元素高度的傳統方法可能會失敗。

效率低下的方法

所描述的暫時取消隱藏元素的方法，測量其高度，然後重新隱藏它既麻煩又低效。

替代方案解決方案

jQuery提供了更有效率的解決方案：

1. 修改元素屬性： 臨時操作元素的樣式屬性：

   • 將位置設為絕對（如果元素已經絕對定位，則可選）
   • 將可見性設為隱藏（使元素不可見）
   • 設定顯示為區塊（使元素可見，但不在主文檔流中）
2. 測量高度： 使用jQuery 的.height()方法檢索元素的高度。
3. 恢復屬性：重設使用 attr() 方法或直接設定 style 屬性將元素的樣式屬性恢復為其原始值。

程式碼範例

var previousCss = $("#myDiv").attr("style");

$("#myDiv").css({
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
});

var optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

此方法允許您謹慎測量隱藏元素的高度，而不影響頁面的佈局或可見性.