jQuery Jquery获取自动高度元素的高度

Jquery get height of auto height element

提问by brenjt

Is there any way to return the height of an element that is already set to auto? I just get 0 when I call $("#element").height();

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

Here is the jquery code. The img.height()return 0 therefore the end result is off.

这是jquery代码。所述img.height（）返回0因此，最终结果是关闭的。

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

The HTML looks like this:

HTML 如下所示：

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

采纳答案by Gho5t

Did you try $("#element").outerHeight()? It gets the computed height rather than the explicitly set height.

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

回答by acarito

I had this same problem and found the solution here: http://www.fortwaynewebdevelopment.com/jquery-width-or-height-always-returns-0-fix/

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

When I'm using jQuery, I like to stick to it as much as I can for consistency's sake.

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

Actually both solutions - using window.load(){} or $("my element").load(){} worked beautifully for me so I hope this can help you out as well or anyone else finding this issue.

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

回答by r00tandy

I have found a workaround for doing a transition with ease-in AND ease-out. This workaround needs the "jump" of the element:

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

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

This way, javascript gets the height - I know it's not a beuatiful way, but it works. This is important for example for the ease-out effect.

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

EDIT: It should be said, that this is just possible with CSS3 and a CSS-Style like this:

编辑：应该说，这仅适用于 CSS3 和这样的 CSS 样式：

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

回答by Lib3695

please check you try to get height when DOM is ready, that is to say in the window.onload function.

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

In case your div element is empty and height is auto, it will return 0. So your div is likely to be empty before full page is loaded.

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

For example : I want to remember initial heights for my .elementDiv divs :

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

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

When not in the onload function, the heights I get are all 0.

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

I hope this was the reason, because I don't see anything else..

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

回答by I am L

You can try Window.getComputedStyle();

你可以试试 Window.getComputedStyle();

It will return the a set of computed style, (if ever the style property is not defined e.g. auto)

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

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

You can then say

然后你可以说

var computedHeight = style.height;

for more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

更多信息：https: //developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

回答by Galley

I think offsetHeight or clientHeight or scrollHeight can solve it. for example:

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

img.parent()[0].offsetHeight

or

或者

img.parent()[0].scrollHeight

Different between these 3 methods can see here:

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

• http://jsfiddle.net/shibualexis/yVhgM/3/
• What is offsetHeight, clientHeight, scrollHeight?

• http://jsfiddle.net/shibualexis/yVhgM/3/
• 什么是 offsetHeight、clientHeight、scrollHeight？