我有一個div A，其中包含div B，其中包含div C，其中包含div D，其中div A的默認高度為40px。就像下面這樣。
<div id='A' style="height: 40px">
<div id='B'>
<div id='C'>
<div id='D'></div>
</div>
</div>
</div>
問題是，div C 的實作方式可以動態改變高度。因此，它可能會超過 div A 的默認高度 (40px) 并導致一些外觀問題。
我想要實作的是將 div A 的高度保持為 40px，只要其任何子 div 的高度不超過 40px。但是，如果任何子 div 的高度超過 40px，我希望子 div的高度覆寫div A 的高度。例如，當 div C 將高度更改為 80px 時，我希望 div A 的高度為 80px。
我想知道是否需要撰寫一個方法來動態計算每個子 div 的高度，并執行一些類似于getElementById('A').style.height = null回傳的子高度大于 40px 的操作。
有沒有更好或更簡單的方法來做到這一點？
uj5u.com熱心網友回復：
嘗試使用“最小高度”。
min-height: 40px;
uj5u.com熱心網友回復：
根據我的觀點，您無需檢查每個子元素的高度。
如果你檢查 B 子元素高度就足夠了，因為那是子元素 C 和 D 的父元素
據此，以下JS代碼將為您提供解決方案
// get parent div #A
var parentElement = document.getElementById('A');
// parent div #A initialHeight
var parentDivOffsetHeight = 40; // no need to mentionion px
// get child div #B offest height
var childDivOffsetHeight = document.getElementById('B').offsetHeight;
// check if child div height is greater than parent div or not
if(childDivOffsetHeight > parentDivOffsetHeight){
//set child div height to parent div
parentElement.style.height = childDivOffsetHeight 'px';
}
相關JS小提琴：https : //jsfiddle.net/katheer_mizal/3ouypevd/18/
要檢查元素高度，您可以使用以下方法
clientHeight包括填充。
var clientHeight = document.getElementById('B').clientHeight;
offsetHeight包括內邊距、滾動條和邊框。
var offsetHeight = document.getElementById('B').offsetHeight;
.style.height等于 $('#content').css('height'.
var offsetHeight = document.getElementById('B').style.height;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/338020.html
標籤：javascript html 查询 css