jQuery获取自动高度元素的高度答案

【问题标题】：Jquery get height of auto height elementjQuery获取自动高度元素的高度
【发布时间】：2011-08-05 17:54:43
【问题描述】：

有没有办法返回已经设置为自动的元素的高度？当我调用 $("#element").height(); 时，我只得到 0;

这里是 jquery 代码。 img.height() 返回 0，因此最终结果为关闭。

img.css({top: (img.parent().height() - img.height()) /2, left: (img.parent().outerWidth() - img.outerWidth()) / 2});

HTML 如下所示：

<div id="exploreImage" class="virtual-room-large" style="width: 288px; height: auto; top: 185px; left: 89px; ">

【问题讨论】：

通常情况下，如果height() 返回0，则元素的高度为 0。你能显示元素的HTML 和其中的内容，以及完整的jQuery 代码吗？

标签： jquery height

【解决方案1】：

你试过$("#element").outerHeight()吗？它获取计算的高度而不是显式设置的高度。

【讨论】：

如果这不起作用，为什么它是公认的答案？
outerHeight 也返回“0”。

【解决方案2】：

请检查您是否在 DOM 准备好时尝试获取高度，即在 window.onload 函数中。

如果您的 div 元素为空且高度为 auto，它将返回 0。因此您的 div 可能在整个页面加载之前为空。

例如：我想记住 .elementDiv div 的初始高度：

var initialHeight = [];
window.onload = function() {
$('.elementDiv').each(function(i) {
  initialHeight[i]=$(this).height();
  });
  // then use it
  }

不在onload函数时，我得到的高度都是0。

我希望这是原因，因为我没有看到其他任何东西..

【讨论】：

【解决方案3】：

我遇到了同样的问题，在这里找到了解决方案： http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

当我使用 jQuery 时，为了保持一致性，我喜欢尽可能地坚持使用它。

实际上这两种解决方案 - 使用 window.load(){} 或 $("my element").load(){} 对我来说都很好，所以我希望这也能帮助你或其他任何人发现此问题。

【讨论】：

不幸的是，当我 6 年前发布此内容时，我还没有想到在这里发布完整的解决方案以防止链接失效。
是否可以修改您的答案并包含以前在链接页面中的代码？
我无法再访问该项目的代码，所以我认为我无法访问。如果我有时间，我会尝试在这里重新解决这个问题。

【解决方案4】：

我找到了一种通过缓入和缓出进行过渡的解决方法。这种变通方法需要元素的“跳转”：

var elementselector = "#elementtoscroll";
$(elementselector ).css("height", "auto");
var elemheight = $(elementselector).css("height");
$(elementselector).css("height", "0");
$(elementselector).css("height", elemheight);

通过这种方式，javascript 获得了高度 - 我知道这不是一种漂亮的方式，但它确实有效。例如，这对于缓出效果很重要。

编辑：应该说，这对于 CSS3 和这样的 CSS 样式是可能的：

#panel{
    background-color: #FF00FF;
    display: block;
    height: 0px;
    transition: all 300ms ease-in-out;
    overflow: hidden;
}

【讨论】：

【解决方案5】：

我认为 offsetHeight 或 clientHeight 或 scrollHeight 可以解决它。例如：

img.parent()[0].offsetHeight

或

img.parent()[0].scrollHeight

这3种方法的区别可以看这里：

【讨论】：

请在答案中解释差异（以及每种方法的含义），而不是链接到外部资源。
我确实这么认为。但 2 个链接解释得很好。
在链接中包含内容的上下文总是好的。看看这里：stackoverflow.com/help/how-to-answer 特别是添加链接内容的重要部分的原因。

【解决方案6】：

你可以试试Window.getComputedStyle();

它将返回一组计算样式，（如果样式属性未定义，例如自动）

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1);

你可以说

var computedHeight = style.height;

【讨论】：

它在 Chrome 上为我返回“自动”:(.
@VeritatisCupitor 你可以试试document.getElementsById("elemId").getBoundingClientRect() 然后检查那里的结果，它应该给你价值。那么你可以根据这个得到高度。更多信息在这里：developer.mozilla.org/en-US/docs/Web/API/Element/…