jQuery 1.8 外部高度/宽度不起作用

Question

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

例如：

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

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

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

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

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

Answer 1

这实际上是一个已知的 jQuery 错误，您可以阅读有关 here 的信息。

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

这样做：

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

不要这样做：

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

Answer 2

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

Answer 3

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

但是..

如果您无权访问调用 outerHeight 的文件，或者您不想编辑文件中的所有 outerHeight 函数，则可以覆盖 jQuery outerHeight 函数，如下所示它总是传递true 参数

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};

Answer 4

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

DEMO - 工作高度方法

上面的演示使用了一个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

Answer 5

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

Here is working 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 吗？或者更糟糕的是忘记定义margin 或border？

Answer 6

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

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

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