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

Question

如果该元素当前设置为height:auto;，我想获取元素的高度，而实际上没有将元素高度设置为自动。

很简单，但是如果不先将元素的高度设置为自动，我无法弄清楚如何获得自动高度值。这是我试图避免的部分。

有人知道我会怎么做吗？

---

这个jsfiddle 将展示我的问题。

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

---

我将尝试澄清我所指的跳转 - 当您调整窗口大小时，如果标题高度发生变化，将开始动画到新高度。然而，动画总是在动画开始之前重置为它的“自动”高度。

例如：

1. 自动高度 = 20 像素
2. 在将所有动画元素的大小从自动高度 (20px) 调整为新高度（即 - 40px）时
3. 如果再次调整大小，所有元素都重置为自动高度（20 像素）然后动画到另一个新高度（即 - 60 像素）

因此，如果您考虑步骤 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

"在当前脚本中，高度首先设置为自动，这会导致 跳来跳去的高度。我试图避免这种跳跃。”

---

当您说“高度跳跃”时，我不明白您的意思是什么，可能是因为您在没有 .stop() 的情况下为高度设置动画，但这里有一个 Fiddle，您可以在下面看到变化。如果这就是你所说的跳跃……

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

// or

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

在最新的 Chrome 中看起来不错。