29

我在很多地方都outerHeight用过outerWidth。现在，在 jQuery 1.8 发布后，我遇到了很多由对象返回而不是其大小引起的问题。

例如：

$('#stackoverflowdiv').Height()      // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div

我发现解决此问题的唯一方法是在函数中使用“真/假”，如下所示，但我得到的结果与标准width()和height()函数相同：

$('#stackoverflowdiv').outerHeight(true)  //  returns 100 px
$('#stackoverflowdiv').outerHeight(false) //  returns 100 px

有谁知道为什么这不再起作用或以其他方式获取元素的高度/宽度+其边距。

编辑：我开始相信这是因为我使用contents()函数在 iframe 中选择元素造成的。我会尝试做一个演示。

4

6 回答 6

35

这实际上是一个已知的 jQuery 错误，您可以在此处阅读。

我在没有参数的情况下遇到了它，修复是设置参数（即使有默认的 {false}），但我能够通过将 true 参数替换为 1 并将 false 参数替换为 0 来打破 Barlas 的小提琴。所以不要如果您是，请不要这样做。

做这个：

alert(jQuery(this).outerHeight(false));

不要这样做：

alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));
于 2013-03-25T03:56:37.287 回答
5

只有当我不这样做时它才.outerHeight(1);有效.outerHeight(true);

于 2013-06-06T14:50:38.403 回答
2

JQuery 1.8 height(), innerHeight(),outerHeight()和outerHeight(true)按预期工作：

演示- 工作高度方法

上面的演示使用了一个 div：

<div id="myDiv">My Div</div>

使用以下 CSS：

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

使用此脚本：

var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);

var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);

结果如下：

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
于 2012-08-23T14:28:46.640 回答
2

最好的解决方法是传递布尔参数true或false在调用outerHeight或outerWidth

但..

如果您无权访问调用的文件，outerHeight或者您不想编辑outerHeight文件中的所有函数，则可以像下面这样覆盖 jQueryouterHeight函数以使其始终传递true参数

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};
于 2015-10-08T18:08:58.900 回答
1

它工作得很好伙伴，我不能确定没有看到你的 html 和 css，但你可以检查这个例子并检查它在 jQuery 1.8.0 上工作正常

这是工作的jsFiddle。

jQuery：

console.log($('#stackoverflowdiv').outerHeight(false));//returns 110
console.log($('#stackoverflowdiv').outerHeight(true));//returns 130

CSS：

#stackoverflowdiv { 
      height:100px; 
      margin:10px 5px; 
      padding:5px; 
      border 2px solid #fff;
}​

你确定你忘了使用分号或定义document.ready吗？或者更糟糕的是忘记定义marginor border？

于 2012-08-23T14:29:28.153 回答
-2

outerHeight只返回一个整数或null根据jQuery DOCs。

返回元素的高度，包括顶部和底部填充、边框和可选的边距，以像素为单位。如果在一组空元素上调用，则返回 undefined（在 jQuery 3.0 之前为 null）。

你的代码中一定有其他东西会影响你的输出并让你看到 div 元素。

于 2012-08-23T14:28:24.917 回答