博客

获取隐藏元素的高度在 jQuery 中是一个常见的需求场景，可以使用 jQuery 提供的 height 和 innerHeight 方法来实现。下面是具体的操作步骤。

步骤一：使用 CSS 将元素隐藏

在 JavaScript 代码中，我们无法获取隐藏元素的高度，因此必须先将这个元素设为不可见。可以通过 CSS 样式将元素的 display 属性设置为 none，或者将其 opacity 属性设置为 0。

.hidden {
  display: none;
}

步骤二：使用 jQuery 的 height 方法获取高度

一旦元素被隐藏，我们就可以使用 jQuery 的 height 方法来获取元素的高度。height 方法将返回元素的实际高度（包括 padding），但是不包括 margin 和 border。下面是一个示例：

// HTML 代码
<div id="mydiv" class="hidden">This is a hidden element.</div>

// JavaScript 代码
var height = $('#mydiv').height();
console.log('Height: ' + height);

步骤三：使用 jQuery 的 innerHeight 方法获取高度

如果你需要获取元素的实际高度（包括 padding 和 border），可以使用 jQuery 的 innerHeight 方法。innerHeight 方法将返回元素的实际高度，包括 padding 和 border，但不包括 margin。下面是一个示例：

// HTML 代码
<div id="mydiv" class="hidden">This is a hidden element.</div>

// JavaScript 代码
var height = $('#mydiv').innerHeight();
console.log('Inner Height: ' + height);

通过以上的步骤，我们可以在 jQuery 中获取隐藏元素的高度。