2

height:auto;要素の高さを実際に auto に設定せずに、要素が現在 に設定されている場合、要素の高さを取得したいと思います。

かなり簡単ですが、最初に要素の高さを自動に設定しないと、自動高さの値を取得する方法がわかりません。それは私が避けようとしている部分です。

誰も私がこれを行う方法を知っていますか?

このjsfiddleは私の問題を示します。

3 つの見出しをすべて同じ高さに設定しようとしています。ウィンドウのサイズを変更するときは、高さを調整する必要があります。現在のスクリプトでは、最初に高さが auto に設定されているため、高さが少し跳ねます。私はこのジャンプを避けようとしています。

私が言及しているジャンプを明確にしようとします - ウィンドウのサイズを変更すると、見出しの高さが変わると、新しい高さへのアニメーションが開始されます。ただし、アニメーションは、アニメーションの開始前に常に「自動」の高さにリセットされます。

たとえば、次のようになります。

  1. 自動高さ = 20px
  2. すべての要素のサイズを変更すると、自動高さ (20px) から新しい高さ (つまり - 40px) にアニメーション化されます
  3. 再度サイズ変更すると、すべての要素が自動高さ (20px) にリセットされ、別の新しい高さ (つまり - 60px) にアニメーション化されます

したがって、ステップ 2 から 3 を検討する場合、私の目標は、アニメーションを現在の高さ (40px) から開始し、新しい高さにアニメーション化する前に自動高さ (20px) にリセットするのではなく、新しい高さ (60px) に進むことです。 (60px)。

これがさらに役立つことを願っています...

4

2 に答える 2

1

要素の を取得し、scrollHeight必要に応じて、box-sizing プロパティに応じて上下のパディングと境界線を追加できます。

異なるブラウザーでは矛盾が生じる可能性があります ( https://stackoverflow.com/a/15033226/1669279を参照) が、height プロパティの変更を本当に避けたい場合は、これが唯一の方法です。

ああ、もう 1 つのアイデア:height親の をautoに設定しheight、要素の を何らかの%値に設定すると、計算された値が になりautoます。height文字通りto を設定しなくても、それが質問の精神に合っているかどうかはわかりません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

「現在のスクリプトでは、最初に高さが 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では見栄えがします。

于 2013-09-03T21:59:00.537 に答える