JavaScript - 需要一种方法来设置元素的 OuterHeight

Question

我有一个容器元素，它是它的子元素的布局容器，我必须根据一些属性来安排子元素。

我需要简单的方法来设置元素的 outerHeight，比如，

$(e).setOuterHeight(200);

jQuery 的 outerHeight 根本不设置高度，实际上它是一个只读方法。

$(e).height(200); // this clips my element

在上面的方法中，我松开了文本类型输入的边框。

我的元素的子元素根据可用空间和其他一些基于它所持有的数据的标准停靠，像 float 、清除等简单布局将不起作用，因为填充等会根据大小动态变化。我最终会使用 Table，即使我不想但别无选择，但无论如何感谢您的帮助。

现在，当元素的大小大于子元素时，就没有问题了，但有时容器元素的高度可能比子元素小，那时，我需要增加尺寸。

function calculateSize(e){
   var s = { 
      width: $(e).innerWidth(), 
      height: 0 
   };
   var ae = new Enumerator(e.children);
   while(ae.next()){
      var child = ae.current();
      // I have tried all alternatives
      // for following lines
      // child.clientHeight || child.offsetHeight
      // $(child).outerHeight()
      // $(child).innerHeight()
      s.height += $(child).outerHeight(); 
   }
   if(s.height > $(e).height()){
      $(e).height(s.height);
   }
}

function layoutChildren(e){
      ....
      /// for every child c
      /// some steps before
      var heightForChildren = 
        calculatedWithPadMarginBorder(availableHeight,c);
      /// tried combinations
      $(c).height(heightForChildren);
      /// last statement fails for button
      /// as button's padding cuts itself
      /// removing padding in calculation
      /// cuts other input elements !!
      /// some steps after
      ....
}

我需要一些解释，说明如何计算运行时高度/宽度(包括/不包括填充/边距/边框等)以及如何正确设置它，以免遇到问题。我无法继续尝试所有排列组合，因为即使在 jQuery 网站上我也看不到正确的文档。

固定高度计算很好，但这是一种动态元素，可以调整自身大小并按特定顺序排列子元素。

问题是没有办法设置outerHeight，当我们设置元素的高/宽时，高/宽实际上是内部高/宽，不考虑边距，而当我们想调整父元素的大小时，我们需要outerHeight , 但我们不能轻易地设置 outerHeight。

我的 calculateSize 和 layoutChildren 是两个独立的方法和两个独立的算法，因为父级将被调整为所有子级高度的总和。然后高度简单地除以没有。 children 叠在一起。我的计算是完美的，但在我的 layoutChildren 方法中，我有元素的“outerHeight”和“outerWidth”，并且不知道如何使用 jQuery 或任何其他方式正确设置它。

Answer 1

.outerHeight( 值 )添加的版本:1.8.0

您可以使用 jQuery.outerHeight(value) 设置元素外部高度的值。例如:$foo.outerHeight( 200 )