jQuery：边框的高度（）答案

【问题标题】：jQuery: height() for a border-boxjQuery：边框的高度（）
【发布时间】：2016-04-12 12:25:37
【问题描述】：

请注意，.height() 将始终返回内容高度，无论 CSS box-sizing 属性的值。 从 jQuery 1.8 开始，这个可能需要检索 CSS 高度加上 box-sizing 属性和然后在每个元素上减去任何潜在的边框和填充该元素具有 box-sizing:border-box。为避免这种惩罚，请使用 .css("height") 而不是 .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 中找到这些示例。

【问题讨论】：

"...从 jQuery 1.8 开始，这可能需要检索 CSS 高度和 box-sizing 属性，然后减去任何潜在的 border 和 @987654330 @ 当元素具有 box-sizing:border-box 时在每个元素上。”
@Vucko 我现在添加了完整的评论。它仍然没有向我解释我的帖子中描述的奇怪行为。

标签： jquery html css

【解决方案1】：

看起来.height() 始终由content-box 测量，但在应用新值时它尊重box-sizing，因此它将测量content-box 值添加到其余设置中，因为框已设置border-box。

如果您在演示中将box-sizing 更改为content-box，它的行为将与此完全相同（在所有情况下都会为每个框设置50px，并且使用content-box 值，所有框都将具有90px）。

【讨论】：

【解决方案2】：

jQuery API 说

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

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

注意 .height(value) 设置盒子的内容高度，不管 CSS box-sizing 属性的值。

因此，如果一个人使用

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

那么 content-height 将设置为 50px，但是由于您有一个 border-box 这意味着 height=90px ，因为高度是 content-height+padding+border （添加两次 20px 的填充）。

这也适用于您的第二个示例

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

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

因此，一切都很好。

【讨论】：

【解决方案3】：

根据 jQuery 文档：

.outerHeight()

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

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

$(element).outerHeight();

在作者的

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

【讨论】：