要素を消すときは
display: none
visibility: hidden
のどちらかを使います。消した要素を再び表示するには
display: block
visibility: visible
を使います。display と visibility の操作はまぜないようにします。
display none と visibility hidden の違い
display none は要素そのものが消えます。次のように縦に並ぶ三つの要素を考えてみましょう。
A
B
C
ここで B を display none で消すと
A
C
となり、実際の高さもつめられます。しかし visibility hidden では
A
C
となります。B の姿は見えないものの、他の要素は「Bがまだそこにある」ようにふるまい、高さをつめません。
JavaScriptで display や visibility を操作する
sample という id をもつ要素を消したり表示したりする JavaScript は次のコードです。
document.getElementById('sample').style.display = 'none';
document.getElementById('sample').style.display = 'block';
document.getElementById('sample').style.visibility = 'hidden';
document.getElementById('sample').style.visibility = 'visible';
