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

Is it possible to get css value of attr height of element when it's max-height is set to 0?

当元素的最大高度设置为0时，是否可以得到元素的attr高度的css值?

I need this to know how much pixels of element to show onclick and since every element has different height that changes with size of the browser I want to get height values from css file.

我需要知道显示onclick的元素像素是多少，因为每个元素的高度都随着浏览器的大小而变化，所以我想从css文件中获取高度值。

http://jsfiddle.net/AqAJc/

4 个解决方案

#1

You can get the height of an element if you have max-height = 0 through the scrollHeight attribute. It works if you set min-weight, but not height though.

如果您有max-height = 0，可以通过scrollHeight属性获得元素的高度。如果你设定的是最小的重量，而不是身高，它就会起作用。

HTML :

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; overflow:hidden; }

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

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

Demo : https://jsfiddle.net/asywL84u/2/

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

Reference : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

参考:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

#2

My first question would to be why are you using max-height: 0; is there something else you can use? Like hide() show() which use display: none

我的第一个问题是你为什么用max-height: 0;还有什么可以用的吗?类似于使用display: none的hide() show()

the only thing I can thing of would be to remove the max-height css get the height and then reapply the max-height:

我唯一能做的就是移除最大高度css得到高度然后重新应用最大高度:

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

This should happen fast enough that you wont see the element but it could be wise to hide it before removing the max-height with:

这应该发生的足够快，你不会看到的元素，但它可能是明智的隐藏它，以除去最大高度:

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

#3

Leave the max height off the css. Cache the height in a variable. Then add the max-height to 0 again.

不要在css中设置最大高度。在变量中缓存高度。然后再把最大值加到0。

$(function(){
    var divHeight = $('.div').height();
    $('.div').css('max-height', '0');
    alert(divHeight);
});

http://jsfiddle.net/AqAJc/4/

#4

$('.div').each(function(){
    var t=$(this); // Cache jQuery reference
    t.css('max-height','none'); // Temporarily override max-height
    t.data('height',t.height()); // Store height in data
    t.css('max-height',''); // Remove our max-height override
});
alert($('.div').data('height'));

jsfiddle: http://jsfiddle.net/AqAJc/7/

jsfiddle:http://jsfiddle.net/AqAJc/7/

#1