考虑折叠边距,如何计算元素的高度

Question

我想计算div元素的总"高度",考虑由于子元素而导致的折叠 边距的影响,即div元素在文档中占据的总空间.我很难想到最好的算法/方法来做到这一点.

举个例子,有一个div元素margin-top的10px和height的50px.这个div元素有一个孩子<h2>,有一个元素margin-top的20px.该div的margin,然后将折叠,实际"height"的那个div会70px.但是,使用jQuery方法,我们只能height在div不考虑它的情况下得到它margins,或者考虑它的10像素margin会给我们错误的值:

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

为了帮助说明我的观点,这里有一个我用两个例子创建的jsfiddle.

我现在最好的猜测是我们必须以某种方式迭代div的所有孩子并计算最高的上下边距.根据我从W3C规范中理解的内容,margin如果目标div具有a top-border-width或a ,我们可以跳过顶部的迭代top-padding.同样适合底部margin.

任何帮助将不胜感激.谢谢!

编辑:

我想到的一个(丑陋)解决方案是将目标div元素包装在另一个div中.然后,我们快速添加和删除透明borderTop和borderBottom到包装div,测量它们之间的高度.边界将强制包装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 .

Answer 1

考虑一下这个黑客:

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

上面的表达式返回70你想要的,对吧？

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

获得高度值后,您可以打开元素...