Question

有没有办法返回已经设置为auto的元素的高度？当我调用$（“＃element”）时，我只得到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; ">

Answer 1

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

当我使用jQuery时，为了一致起见，我尽可能地坚持下去。

实际上两个解决方案 - 使用window.load（）{}或$（“ my element ”）。load（）{}对我来说非常好，所以我希望这也可以帮助你或其他任何人发现此问题。

Answer 2

请检查你是否尝试在DOM准备就绪时获得高度，也就是说在window.onload函数中。

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

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

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

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

我希望这是原因，因为我没有看到任何其他内容。

Answer 3

我找到了一个使用轻松和缓出进行转换的解决方法。此解决方法需要元素的“跳转”：

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

这样，javascript获得了高度 - 我知道它不是一种美化的方式，但它有效。这对于缓和效果很重要。

编辑：应该说，CSS3和CSS-Style就是这样的：

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

Answer 4

您可以尝试使用Window.getComputedStyle（）;

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

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

然后你可以说

var computedHeight = style.height;

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

Answer 5

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

img.parent()[0].offsetHeight

或

img.parent()[0].scrollHeight

这三种方法之间的区别可以在这里看到：

Answer 6

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

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

6 个答案: