Question

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

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

$(e).setOuterHeight(200);

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

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

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

我的元素的子节点基于可用空间和基于其保存的数据的其他一些标准停靠，简单的布局（如float，clear等）将无法工作，因为填充等会根据大小动态更改。我最终会使用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 ，但我们不能轻易地挫败外部的高度。

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

Answer 1

.outerHeight( value ) version added: 1.8.0

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

Answer 2

如果您没有特殊要求，默认情况下，标准元素会调整其高度以匹配其子项。如果你设置样式为float：left或float：right，那么它的默认宽度也将包含它的所有子项。

Answer 3

好的，这很奇怪，但这就是答案。

有奇怪的控件，

选择
BUTTON（INPUT [type = submit | reset | button]）

WebKit浏览器

Padding和Border被视为所有控件的OuterWidth的一部分
必须将“填充”和“边框”添加到“所有控件的外部宽度”
Padding和Border被认为是“怪异控件”的内部宽度的一部分
在为所有“非奇怪控件”设置宽度之前，必须从宽度中减去填充和边框

非WebKit浏览器

Padding和Border被视为所有非“怪异控件”
对于所有非“怪异控件”，必须将“填充”和“边框”添加到“宽度”作为“外部宽度”
Padding和Border被认为是所有非“怪异控件”
在为所有“非奇怪控件”设置宽度之前，必须从宽度中减去填充和边框

Answer 4

我很乐意提供帮助，但我根本不明白你的问题。关于jQuery维度方法的文档，我发现http://api.jquery.com/category/css/包含innerWidth（），innerHeight（），outerWidth（）和outerHeight（）的文档。

我希望这会有所帮助，否则，请尝试阅读您的问题，让您更明确地了解您需要的答案。

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

4 个答案: