2

我想获得一个元素的高度，如果该元素当前设置为height:auto;，而不实际将元素高度设置为自动。

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

有人知道我会怎么做吗？

这个jsfiddle将演示我的问题。

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

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

例如：

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

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

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

4

2 回答 2

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;
    }
});
于 2013-09-03T16:23:35.910 回答
0

“使用当前脚本，首先将高度设置为自动，这会导致高度稍微跳跃。我试图避免这种跳跃。”

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

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

// or

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

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

于 2013-09-03T21:59:00.537 回答