display : none と visibility : hidden でdiv要素を消したり表示したりする

要素を消すときは

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';