javascript - Div を自動高さにスライド

Question

スライドインおよびスライドアウトするdivがあります。これを行うには、高さ 0 からプリセットの高さになるまで、毎秒 2px ずつ高さを増やします。

divの開始プロパティがdisplay:noneとheight:0であることを考慮すると、コンテンツは予測できない高さであるため、divのコンテンツの高さを決定する方法はありますか?

ありがとうございました。

Answer 1

コツは、一時的に表示して、高さを測ってから、再度非表示にすることです。また、visibility: hidden と position: absolute を使用すると、ページ レイアウトは変更されません。

function getElementHeight(el)
{
    var styles = {
        visibility: el.style.visibility,
        height: el.style.height,
        position: el.style.position,
        display: el.style.display
    };
    el.style.visibility = "hidden";
    el.style.height = "auto";
    el.style.position = "absolute";
    el.style.display = "block";
    var height = el.offsetHeight;
    el.style.display = styles.display;
    el.style.position = styles.position;
    el.style.height = styles.height;
    el.style.visibility = styles.visibility;
    return height;
}

スタイルの高さを取得したい場合は、次の 2 行を の後に追加できますvar height = el.offsetHeight;。

el.style.height = height + "px";
height += (height - el.offsetHeight);