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

JavaScript-需要一种方法来设置元素的OuterHeight,javascript,jquery,html,Javascript,Jquery,Html,我有一个容器元素,它有点像它的子元素的布局容器,根据一些属性我必须排列子元素 我需要一个简单的方法来设置元素的外观,比如 $(e).setOuterHeight(200); jQuery的outerHeight根本不设置高度,实际上它是一个只读方法 $(e).height(200); // this clips my element 在上面的方法中,我松开了文本类型输入的边框 “我的元素”的子元素是基于可用空间和其他一些基于它所保存的数据的条件停靠的,简单的布局(如浮动、清除等)将不起作用,

我有一个容器元素,它有点像它的子元素的布局容器,根据一些属性我必须排列子元素

我需要一个简单的方法来设置元素的外观,比如

$(e).setOuterHeight(200);
jQuery的outerHeight根本不设置高度,实际上它是一个只读方法

$(e).height(200); // this clips my element
在上面的方法中,我松开了文本类型输入的边框

“我的元素”的子元素是基于可用空间和其他一些基于它所保存的数据的条件停靠的,简单的布局(如浮动、清除等)将不起作用,因为填充等会根据大小动态变化。我最终会使用这个表,即使我不想,但别无选择,但无论如何,谢谢你的帮助

现在,当元素的大小大于子元素时,就没有问题了,但有时容器元素的高度可能小于子元素,此时,我需要增加大小

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是两个独立的方法和两个独立的算法,因为父项的大小将调整为所有子项高度的总和。然后,身高被简单地除以一个叠在另一个上面的孩子的数量。我的计算很完美,但在我的layoutChildren方法中,我有元素的“outerHeight”和“outerWidth”,不知道如何使用jQuery或任何其他方法正确设置它。

我很乐意提供帮助,但我根本不理解您的问题。 关于jQuery的dimensions方法的文档,我发现它同时保存innerWidth()、innerHeight()、outerWidth()和outerHeight()的文档


我希望这会有所帮助,否则,请尝试通读您的问题,使其更清楚您需要的答案。

如果您没有特殊要求,则默认情况下,标准元素的高度会与子元素的高度相匹配。如果将样式设置为float:left或float:right,则其默认宽度也将是包含其所有子项的宽度。

好的,这很奇怪,但这就是答案

有一些奇怪的控制装置

  • 挑选
  • 按钮(输入[类型=提交|重置|按钮])
WebKit浏览器

  • 填充和边框被视为所有控件的外径的一部分
  • 填充和边框必须作为所有控件的外径添加到宽度
  • 填充和边框被视为“怪异控件”的InnerWidth的一部分
  • 在设置所有“非怪异控件”的宽度之前,必须先从宽度中减去填充和边框
非WebKit浏览器

  • 填充和边框被视为所有非“怪异控件”的外径的一部分
  • 填充和边框必须作为所有非“怪异控件”的外径添加到宽度中
  • 填充和边框被视为所有非“怪异控件”的InnerWidth的一部分
  • 在设置所有“非怪异控件”的宽度之前,必须先从宽度中减去填充和边框
.outerHeight(值)
新增版本:1.8.0


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

我想将outerHeight设置为元素,jQuery给了我outerHeight,但我如何将其设置为元素?好的,现在我明白了。这是CSS-boxmodel的一个基本问题:这一问题一直备受争议。我建议采用一种相当丑陋的方法,因为我们已经在处理javascript高度计算了。这是您计算有边距和无边距的外光线差,设置高度时添加此差。我希望这是有意义的-尽管我强烈建议您尝试找到一个CSS解决方案,但通常这些类型的元素排列问题总是有一个比JS解决方案运行更平滑的CSS解决方案:)这确实是一个丑陋的解决方案,不幸的是,计算仍然不能很好地执行,因为我刚刚发现,SELECT和BUTTON是唯一具有与其他控件不同计算的控件,并且只有这些控件被剪裁。我很喜欢CSS解决方案,但我们再次与30%的IE用户打交道,IE 7-8在CSS2上仍然工作异常。这不应该是你的问题。。。IE将因缺乏开发人员的关注而消亡(尽管这只是我微薄的希望——我知道这不应该是一个讨论板)