Javascript / jQuery：将max-height设置为0时获取高度

Question

将其设置为0 height时是否可以获得元素的attr 的css值max-height？

我需要知道多少元素才能显示onclick，并且由于每个元素的高度都不同，该高度随浏览器的大小而变化，因此我想从CSS文件中获取高度值。

http://jsfiddle.net/AqAJc/

Answer 1

如果您通过scrollHeight属性使max-height = 0，则可以获取元素的高度。如果您设置最小重量，则有效，但不设置高度。

HTML：

<div>
  Here you have a normal div
  <div id="toggable">
    Something hidden is in here, but we can still get the height !
    <div class="other-content">
      Something else here
    </div>
  </div>
</div>

JS：

alert(document.getElementById('toggable').scrollHeight)

CSS：#toggable {max-height：0; 溢出：隐藏 }

.other-content {
  min-height: 100px;
}

演示：https : //jsfiddle.net/asywL84u/2/

参考：https : //developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

Answer 2

我的第一个问题是你为什么使用max-height: 0;还有其他可以使用的东西吗？喜欢hide() show()哪个用display: none

我唯一能做的就是删除 max-height css 获取高度，然后重新应用 max-height：

$('.div').css('max-height', 'none')
console.log($('.div').height())
$('.div').css('max-height', '0')

这应该发生得足够快，您不会看到该元素，但在删除之前隐藏它可能是明智的max-height：

$('.div').hide()
$('.div').css('max-height', 'none')    
console.log($('.div').height())
$('.div').css('max-height', '0')
$('.div').show()