使用 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 : "");

此方法允许您谨慎测量隐藏元素的高度，而不影响页面的布局或可见性.