javascript - 在不将高度设置为自动的情况下获取元素的自动高度

Question

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

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

有人知道我该怎么做吗？

---

这jsfiddle将证明我的问题。

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

---

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

例如:

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

因此，如果您考虑第 2 步到第 3 步，我的目标是让动画从当前高度 (40px) 开始并继续到新高度 (60px)，而不是在设置动画之前重置为自动高度 (20px)新高度 (60px)。

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

Answer 1

你可以拿scrollHeight元素的大小，并根据 box-sizing 属性可选地添加顶部和底部的填充和边框。

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

哦，另一个想法:你可以设置 height parent 的 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;
    }
});