javascript - 如何在考虑折叠边距的情况下计算元素的高度

Question

考虑到 collapsed 的影响，我想计算一个 div 元素的总“高度” margins因为子元素，也就是div元素在文档中占据的总空间。我很难想出执行此操作的最佳算法/方法。

例如，考虑一个带有 margin-top 的 div 元素的 10px和一个 height的 50px .这个 div 元素有一个子元素 <h2>具有 margin-top 的元素的 20px . div的 margin然后会崩溃，实际的"height"其中div将是 70px .然而，使用 jQuery 方法，我们只能得到 height。的 div不考虑它是 margins ，或者考虑它是 10像素 margin这会给我们错误的值(value):

$(elem).outerHeight() // 50
$(elem).outerHeight(true) // 60

为了帮助说明我的观点，here是我用两个例子创建的 jsfiddle。

目前我最好的猜测是我们必须以某种方式遍历 div 的所有子项并计算最高的顶部和底部边距。 根据我从 W3C 规范中了解到的情况，我们可以跳过此迭代以获得顶部 margin如果目标 div 有 top-border-width或 top-padding .底部同上margin .

如有任何帮助，我们将不胜感激。谢谢!

编辑:

我想到的一个(丑陋的)解决方案是将目标 div 元素包装在另一个 div 中。 然后，我们快速向包装 div 添加和删除透明的 borderTop 和 borderBottom，测量它们之间的高度。边框将强制包装 div 的边距不与其子边距一起折叠。像这样:

var collapsedHeight = function( target ) {
   var $wrapper = $('<div />'),
     $target = $(target);

   $wrapper.insertAfter($target);
   $target.appendTo($wrapper);
   $wrapper.css({
       borderTop: '1px solid transparent',
       borderBottom: '1px solid transparent'
   });
   var result = $wrapper.outerHeight() - 2;
   $target.insertAfter($wrapper);
   $wrapper.remove();

   return result;
};

我为它做了一个jsFiddle here .

Answer 1

考虑这个 hack:

$( elem ).wrap( '<div style="border:1px solid transparent;"></div>' ).parent().height()

上面的表达式返回70，这是你想要的，对吧？

因此，我们的想法是将您的元素包装在具有透明边框集的 DIV 中。此边框将防止您的元素的边距干扰其上一个和下一个兄弟元素的边距。

一旦获得高度值，就可以展开元素...