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

Question

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

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

$(e).setOuterHeight(200);

jQuery的outerHeight根本没有设置高度,实际上它只是一个readonly方法.

$(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

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

有一些奇怪的控制，

• 选择
• 按钮（输入[类型=提交|重置|按钮]）

WebKit 浏览器

• Padding 和 Border 被视为所有控件的 OuterWidth 的一部分
• 对于所有控件，内边距和边框必须添加到宽度作为 OuterWidth
• Padding 和 Border 被视为“奇怪控件”的 InnerWidth 的一部分
• 在设置所有“非奇怪控件”的宽度之前，必须从宽度中减去填充和边框

非 WebKit 浏览器

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