Question

我想要容器元素的高度，包括边距和填充。

当我将鼠标悬停在Chrome开发工具中的元素上时，我会获得我正在寻找的值，但是当我使用jQuery $('element').outerHeight(true)时;我得到的价值要小得多。

该元素包含一个jQuery轮播（在一个包含position:relative和项目position: absolute的容器中），可能与它有关吗？

提前致谢

Answer 1

我多次遇到过这个问题，没有使用任何插件或unruly setTimeout函数的最佳解决方案是使用hook进入浏览器的onLoad事件。使用jQuery，就像这样：

$(window).load(function(){ ...outerHeight logic goes here... });

这可能与您的标准$(function(){ ...code... });完全分开，因此您所有其他正常运行的代码都不必等到页面上的每个元素都已加载。

为什么会出现这种情况：
Chrome具有与Firefox不同的渲染算法，这使得它在页面上的所有元素完全绘制/显示之前触发onLoad事件，并且可供jQuery选择和检索高度。 setTimeout()大部分时间都会工作，但你不希望依赖于那些天生就是盲目的东西 - 谁知道，将来Chrome中的这个“怪癖”可以修复！：）

Answer 2

我遇到了同样的问题。我使用 setTimeout 稍等一点，在Chrome中获得正确的高度：

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

我希望有所帮助！

Answer 3

我遇到了同样的问题。

Firefox外观高度通过console.log：430 Chrome外观高度通过console.log：477

真正的外部高度（萤火虫布局）：820

打开Firebug或删除状态栏后，它在console.log中设置了正确的值（820）（因此代码可以正常工作）。

问题是由于图像造成的。即使您在文档准备就绪时运行它，但并非所有图像都可能已加载，因此计算错误。

我正在使用desandro的插件，它解决了我的问题。 https://github.com/desandro/imagesloaded

Answer 4

我认为你可能需要

.outerHeight({margin: true});

根据here：

可以通过传递边距设置为true的选项图来包含保证金。

Answer 5

对我来说完全正常工作的是@Matt Reilly＆amp; @Lasha回答

$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});

我过去常常将代码放在$(document).ready(function(){...});中，但有时它会变得有些愚蠢，所以上面的工作非常完美。

Answer 6

如果窗口已加载并且文档已准备好并且您已考虑浮动并且仍然遇到此问题，那么请考虑查找具有相同ID的元素。确保使用jQuery选择器获得正确的元素。我忘了我在dom中有另一个元素与完全相同的id。考虑使用jQuery更改背景颜色以进行验证。

Answer 7

尝试了这些解决方案中的每一个。最后打开了检查员并意识到我的var IAP = { list: [ "unlockall" ] }; IAP.load = function () { // Check availability of the storekit plugin if (!window.storekit) { console.log("In-App Purchases not available"); return; } // Initialize storekit.init({ ready: IAP.onReady, purchase: IAP.onPurchase, restore: IAP.onRestore, error: IAP.onError }); }; // StoreKit's callbacks (we'll talk about them later) IAP.onReady = function () {}; IAP.onPurchase = function () {}; IAP.onRestore = function () {}; IAP.onError = function () {}; IAP.onReady = function () { // Once setup is done, load all product data. storekit.load(IAP.list, function (products, invalidIds) { IAP.products = products; IAP.loaded = true; for (var i = 0; i < invalidIds.length; ++i) { console.log("Error: could not load " + invalidIds[i]); } }); }; var renderIAPs = function (el) { if (IAP.loaded) { var coins10 = IAP.products["unlockall"]; var html = "<ul>"; for (var id in IAP.products) { var prod = IAP.products[id]; html += "<li>" + "<h3>" + prod.title + "</h3>" + "<p>" + prod.description + "</p>" + "<button type='button' " + "onclick='IAP.buy(\"" + id + "\")'>" + prod.price + "</button>" + "</li>"; } html += "</ul>"; el.innerHTML = html; } else { el.innerHTML = "In-App Purchases not available."; } }; renderIAPs(document.getElementById('in-app-purchase-list')); IAP.onPurchase = function (transactionId, productId, receipt) { if (productId === 'unlockall') { alert("GEKAUFT!"); } }; IAP.onError = function (errorCode, errorMessage) { alert('Error: ' + errorMessage); }; IAP.buy = function (productId) { storekit.purchase(productId); }; IAP.onRestore = function (transactionId, productId, transactionReceipt) { // Pseudo code that unlocks the full version. if (productId === 'unlockall') { FeatureManager.unlockEverything(); } }; IAP.restore = function () { storekit.restore(); };仍有p。一如既往地感谢Normalize ......

Answer 8

使用outerHeight不能正确计算内隐，固定和绝对元素。

尝试使用scrollHeight属性：

$('element').prop('scrollHeight')

Answer 9

https://stat4701.github.io/edav/2015/04/02/rvest_tutorial/，value_last_1 value_last_2 value_last_3 value_last_4 53.40 91.29 106.56 34.71 131.92 81.53 70.57 31.82 0.00 0.00 21.27 12.55在以下情况下不保证准确：

页面已缩放
隐藏元素或其父元素

Answer 10

一个小技巧。将代码放在jquery的加载，滚动和调整大小函数中，如下所示：

$(window).on('load scroll resize', function(){
    //outerHeight code
});

Answer 11

如果你按类选择，你可以一次选择多个元素，如果第一个元素的高度错误，它将是你使用outerHeight()获得的高度（这是我个人的问题）

outerHeight（true）给出错误的值

11 个答案: