jQuery使用display:none属性获取元素的高度

Question

有没有一种简单的方法可以获得内部有隐藏子div的父div的高度？如果没有，要取得这样的结果，有什么困难的办法呢？

附言：我知道这个话题可能会重复，但我发现的其他话题都是负面的最佳答案。

var getHeight = $(".parent").height();
console.log(getHeight);

.parent{
position:absolute;
top:0;
left:0;
}

.visibleChild{
position:relative;
height:20px;
background-color:red;
}

.hiddenChild{
display:none;
height:20px;
background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="visibleChild">
This div is visible.
</div>
<div class="hiddenChild">
This div is hidden.
</div>
</div>

Answer 1

当没有显示子元素时，您当然可以获得父元素的高度，但当考虑到所有子元素的高度时，听起来您想要获得父元素高度。在这种情况下，您可以使子项隐藏但显示，获取高度并还原：

/* parentSelector: selector we wish to know its height
* childSelector:  children to display when measuring parent
*/ 
function getHeight(parentSelector, childSelector) {
var parent = $(parentSelector);
var children = parent.children(childSelector);
var styleState = [];
//set state
children.each(function (i) {
let c = $(this);
styleState[i] = c.css(['display', 'visibility']);
c.css({ display: '', visibility: 'hidden' });
});
var height = parent.css('height');

//revert state
children.each(function (i) {
let { display, visibility } = styleState[i];
$(this).css({ display, visibility });
});
return height;
}
$('#test > div').hide();
console.log(getHeight('#test', 'div'));

#test { background: brown; padding: 1em }
#test > div { height: 50px; background: yellow; margin: 1em 0 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<span>span</span>
<div>div</div>
<div>div</div>
</div>

我希望这能有所帮助！