获取绑定到 onClick 事件的元素的高度，而无需单击它

Question

>我正在尝试将元素的高度设置回其原始状态，但该元素默认处于隐藏状态(display：none(，并且仅由单击事件激活。

如何在不先实际单击元素的情况下获取元素的高度？

现在我正在使用这段代码，但它当然将高度定义为 0，因为该元素尚未显示。

var initHeightInner = $('#div').find('.list').height();

Answer 1

您可以将链接的不透明度设置为0和/或可见性：隐藏。然后，您将能够获得它的实际高度。 这是下面的例子，向您展示区别

console.log('Hidden', document.getElementsByClassName('hidden')[0].clientHeight)
console.log('Opacity', document.getElementsByClassName('opacity')[0].clientHeight)

.hidden{
display:none;
}
.opacity{
opacity:0;
position:absolute;
left:-9999px;
top:-9999px;
}

<a href="#" class="hidden">Hidden</a>
<a href="#" class="opacity">Zero opacity</a>

Answer 2

这是正常的，因为您的元素最初是用等于零的height定义的。 因此，您必须删除height: 0;属性并仅使用visibility: hidden...但在这种情况下，它可能会影响此元素在单击事件上的动画。因此，您可以尝试在 .list 元素下方添加新的div(例如使用 .list-body 类(，并尝试从该元素获取高度。 喜欢 ：var initHeightInner = $('#div').find('.list-body').height()