Question

在jQuery API中声明：

请注意，.height（）将始终返回内容高度，无论如何 CSS box-sizing属性的值。从jQuery 1.8开始，这个可能需要检索CSS高度加上box-sizing属性和然后在每个元素上减去任何可能的边界和填充该元素具有box-sizing：border-box。为避免这种惩罚，请使用 .css（＆＃34; height＆＃34;）而不是.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的高度设置为50px（因为内容高度为50px），但我发现高度设置为90px。但是，如果我使用

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

boxA的高度为50px，因此缩小。为什么第一种方法也不能产生50px的高度？

此外，命令

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

会将boxA的高度设置为130px，但$('#wrapper').css('height')会返回90.这里发生了什么？

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

Answer 1

.height()似乎始终按content-box衡量，但在应用新值时，它会尊重box-sizing，因此它会将测量的content-box值添加到其他设置中border-box已设置。

如果您在演示时将box-sizing更改为content-box，则其行为将完全相同（在所有情况下都会将50px设置为每个框，并且content-box值为全部盒子将有90px）。

Answer 2

jQuery API说

请注意，.height（）将始终返回内容高度，无论如何 CSS box-sizing属性的值。

这意味着$('#wrapper').height()为50px（因为boxA的内容高度为50px）而$('#wrapper').css('height')为90px（因为您的顶部填充为20px，底部填充为20px）并且对于border-box，高度由content-height + padding + border给出。此外，API声明

请注意，.height（value）设置框的内容高度，无论如何 CSS box-sizing属性的值。

因此，如果使用

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

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

这也适用于你的第二个例子

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

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

因此，一切都很好。

Answer 3

根据 jQuery 文档：

<块引用>

.outerHeight()

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

所以就我而言，它很简单：

$(element).outerHeight();

在作者的

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

jQuery：border（）用于边框

3 个答案: