jQuery:边框的高度()

Question

它在jQuery API中的声明

注意，无论CSS框大小属性的值如何，.height()总是返回内容高度。从jQuery 1.8开始，这可能需要检索CSS高度加框大小属性，然后在元素有框大小时减去任何潜在的边框和填充。要避免这种损失，请使用.css(“高度”)而不是.height()。

我尝试了下面的例子

<div id='wrapper' class='boxA'>
  <div class='boxB'>
    Test
  </div>
</div>

使用CSS

.boxA{
  padding: 20px;
  background-color: yellow;
  box-sizing: border-box;
  margin: 50px;
}

.boxB{
  height: 50px;
  background-color: red;
}

根据jQUery API，我确信

$('#wrapper').height($('#wrapper').height());

将boxA的高度设置为50 to (因为内容高度为50 to )，但我发现高度设置为90 to。但是如果我用

$('#wrapper').css('height', $('#wrapper').height()+"px");

boxA的高度为50 of，因此会缩小。为什么第一种方法不能同时产生50 as的高度？

此外，命令

$('#wrapper').height($('#wrapper').css('height'));

将boxA的高度设置为130 90，但$('#wrapper').css('height')返回90。这里发生何事？

您可以在这个jFiddle中找到这些示例。

Answer 1

jQuery API说

请注意，.height()将始终返回内容高度，而不管CSS框大小属性的值如何。

这意味着$('#wrapper').height()为50 by (因为boxA的内容高度为50 by)和$('#wrapper').css('height')为90 by(因为顶部填充为20 by，底部填充为20 by)，而对于border-box，则由内容高度+填充+边框表示。此外，API还指出：

请注意，.height(值)设置框的内容高度，而不考虑CSS框大小属性的值。

因此，如果一个人使用

$('#wrapper').height($('#wrapper').height());

然后，内容高度将设置为50 to，但由于您有一个border-box，这意味着height=90px，因为高度是内容高度+填充+边框(添加两次填充20 to)。

这也适用于第二个示例。

$('#wrapper').height($('#wrapper').css('height'));

为了将内容高度更改为90 be，border-box的总高度必须是90px+20px+20px=130px。

所以，一切都很好。

Answer 2

看起来.height()总是由content-box度量的，但是当应用新值时它尊重box-sizing，因此它将测量的content-box值添加到其他设置中，就像方框已经设置了border-box一样。

如果您在演示时将box-sizing更改为content-box，它的行为将完全相同(在所有情况下，都会将50px设置为每个框，而对于content-box值，所有框都将有90 it )。

Answer 3

根据jQuery文档：

.outerHeight() 获取匹配元素集中的第一个元素的当前计算的外部高度(包括填充、边框和可选边距)，或设置每个匹配元素的外部高度。

所以在我的例子中，它很简单：

$(element).outerHeight();

在作者的作品中

$('#wrapper').outerHeight();