こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

javascript 要素追加後の高さ

$("div").append("要素");

で要素を追加した後の親要素divの高さは、実際に要素を追加して結果の要素の高さをみる、もしくはどういう構造になるか計算して高さを事前に計算する以外に手はないでしょうか?

要素追加前に親要素の高さをアニメーションで大きくして、その後要素を追加したいです。

投稿日時 - 2018-07-16 13:25:16

QNo.9518762

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

内容から察するに$("div")にはあらかじめピッタリサイズでheightが設定されていると思います。
それを前提に考えると
対象のdivにid="box"を付けて
<style>
#box { overflow: hidden; }
</style>
としておいて
$('#box').append('要素').animate({height: $('#box')[0].scrollHeight});
でどうでしょうか?
要素を追加してからアニメーションしているので希望の処理とは違いますが。


heightを設定してない場合は
$('#box').append('<div style="display:none" />')
.children('div:last').append('要素').slideDown();
不要な<div>が残りますが上と同じような動作をします。

投稿日時 - 2018-08-01 06:28:45