jQuery 使用 display:none 屬性獲取元素的高度

Question

有沒有一種簡單的方法來獲取內部有隱藏子 div 的父 div 的高度？ 如果不是，那么實現這種結果的困難方法是什么？

PS：我知道這個話題可能是重復的，但我發現的其他話題都是負面得分的最佳答案。

 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>

我希望這有幫助！