javascript - 计算父级边距的 outerHeight

Question

给定

<div id="parent>
  <div id="child" style="height:10px;margin:5px;padding:2px"></div>
</div>

我想计算父级的高度(包括边距)。我找不到合适的方法。

console.log($('#parent').outerHeight());        //= 14
console.log($('#parent').outerHeight(true));    //= 14
console.log($('#parent')[0].offsetHeight);      //= 14
console.log($('#parent')[0].getBoundingClientRect().height); //=14

//but
console.log($('#child').outerHeight());         //= 14
console.log($('#child').outerHeight(true));     //= 24 !!

这是它的 jsfiddle:https://jsfiddle.net/estani/w0ro2Lsw/3/

Answer 1

子元素的外边距在父元素之外。但它们不是父元素的边距，这就是为什么 outerHeight 不会注意到它们。

找到父级高度 + 子级边距的最佳方法取决于您的用例:

• 如果子元素是父元素中的唯一元素，并且您想使用边距使父元素大于子元素，我建议给父元素padding:5px而不是 margin:5px 给 child 。

• 添加 overflow:auto 将使父级包含子级的边距。

• 如果您希望子级和父级共享边距，请将 margin:5px 给父级。

在所有这些情况下，outerHeight 都会返回您想要的值。