Question

如果所述元素当前设置为height:auto;，我想获取元素的高度，而不实际将元素高度设置为auto。

非常简单，但我无法弄清楚如何在不首先将元素的高度设置为auto的情况下获取自动高度值。这是我试图避免的部分。

任何人都知道我会这样做吗？

此jsfiddle将证明我的问题。

我正在尝试将所有三个标题设置为相同的高度。调整窗口大小时，我需要调整高度。使用当前脚本，高度首先设置为auto，这会导致高度跳跃一点。我试图避免这种跳跃。

我将尝试澄清我所指的跳跃 - 当您调整窗口大小时，如果标题高度发生变化，则动画将以新高度开始。但是，在动画开始之前，动画始终会重置为“自动”高度。

例如：

自动高度= 20px
调整从自动高度（20px）到新高度（即 - 40px）的所有元素的大小调整
如果再次调整大小，则所有元素都会重置为自动高度（20px），然后将其设置为另一个新高度（即 - 60px）

因此，如果你考虑第2步到第3步，我的目标是让动画从当前高度（40px）开始并进入新高度（60px），而不是在动画制作之前重置为自动高度（20px）。新的高度（60px）。

希望这有助于进一步......

Answer 1

您可以使用元素的scrollHeight，并根据box-sizing属性选择添加顶部和底部填充和边框。

您可能会遇到与不同浏览器不一致的问题（请参阅https://stackoverflow.com/a/15033226/1669279），但如果您真的想避免更改height属性，则这是唯一的方法。

哦，另一个想法：您可以将父级的height设置为auto，并将元素的height设置为某个%值，这将转向计算值为auto。即使您没有将height字面设置为auto，也不确定这是否符合问题的精神。

您可以根据我的（第一个）建议在您的JsFiddle中进行以下更改：

heading.each(function () {
    var computedStyle = window.getComputedStyle(this);
    var height = this.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) - parseInt(computedStyle.borderTop) - parseInt(computedStyle.borderBottom);
    if (height > h) {
        h_elem = this;
        h = height;
    }
});

Answer 2

“使用当前脚本，高度首先设置为auto，这会导致高度跳了一下。我试图避免这种跳跃。“

当你说“高度跳跃”时，我不明白你是什么意思，也许是因为你没有.stop（）动画高度，但这里是Fiddle，下面你可以看到变化。如果那是你正在谈论的跳跃......

heading.stop().animate({height:h+"px"},200); // Animate with .stop()

// or

heading.css({height:h+"px"},200); // Change height with CSS

最新的Chrome看起来不错。

获取元素的自动高度而不将高度设置为自动

2 个答案: