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

Posted 2023-03-06

【中文标题】jQuery 1.8 外部高度/宽度不起作用

【英文标题】：jQuery 1.8 outer Height/Width not working

【发布时间】：2012-08-19 02:20:18

【问题描述】：

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

例如：

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

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

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

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

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

【问题讨论】：

这对您的代码来说似乎是一个非常本地化的问题，因为 jQuery 的 1.8 高度/宽度方法的行为符合预期。如果有的话，1.8 版本为这些方法添加了新功能并解决/修复了几个问题。查看 1.8 修复的一些标记：bugs.jquery.com/ticket/10877、bugs.jquery.com/ticket/10413、bugs.jquery.com/ticket/6724、bugs.jquery.com/ticket/11724

这个问题是因为旧版本的jquery-ui

我看到了相同的行为，如外部宽度/高度损坏并返回一个元素，而不是数字。这个问题不应该结束。好工作的版主。

新问题：***.com/questions/12718084/…

这不应该被关闭

【参考方案1】：

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

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

这样做：

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

不要这样做：

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

【讨论】：

在将 JQuery 从 1.7.2 升级到 1.9.1 时，我遇到了 JQuery Tools Tooltip 插件的问题。将outerWidth() 更改为outerWidth(false) 并将outerHeight() 更改为outerHeight(true) 后，它工作正常。

当 jquery-tokeninput 开始在错误的位置呈现下拉菜单时，我遇到了这个问题。我将它追溯到一个 outerHeight 方法，并且能够通过传递 false 来解决它。我还尝试删除 jquery-ui-1.8.20，这也解决了这个问题 - 我现在将升级 jquery-ui 并查看它是否是它与较新版本的 JQuery 之间的交互。在我的情况下，jquery-tokeninput 在升级到 JQuery 1.8 及更高版本后中断。

【参考方案2】：

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

【参考方案3】：

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

但是..

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

var oldOuterHeight =  $.fn.outerHeight;

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

【参考方案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

【参考方案5】：

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

Here is working jsFiddle.

jQuery：

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

css：

#***div  
      height:100px; 
      margin:10px 5px; 
      padding:5px; 
      border 2px solid #fff;
​

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

【参考方案6】：

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

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

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

【讨论】：

我想这可能是因为我正在使用 contents() 函数在 iFrame 中选择元素。我将对此进行测试。