jQuery | display:noneから表示に戻すとレイアウトが崩れる原因と対処法
JavaScriptやjQueryのcss()でdisplay:noneで非表示にしている要素を表示に戻した時にレイアウトが崩れてしまう原因と対処法です
display:noneから表示に戻すとレイアウトが崩れる原因
display:noneから表示に戻すとレイアウトが崩れるのは、もともとCSSの初期値でdisplay:noneを設定している要素は問題なく、JavaScriptやjQueryのスクリプトで非表示に書き換えた要素にて発生します
原因は元パラメータがblockではないのにdisplay:blockで表示に戻している場合が殆どで、display:flexなどレイアウトに影響を与える他のパラメータを設定されていた要素をnoneで上書きしていて、戻す時にblockなので元のデザインと変わってしまうから
また、CSSでdisplayを変更していない要素でも初期値の違いがあります
例えばpやdivのデフォルト値はblockですが、aやspan、imgなどはinlineと初期値が違うので再表示する際は注意です
display:noneから表示に戻すとレイアウトが崩れる時の対処法
そのままですが、表示に戻す祭にdisplay:blockではなく元々のスタイルを設定すればOK
aタグやspan、画像などでのデフォルト値の場合は、display:inlineとします