CSSでDOMを非表示にするパターン比較的なやつ

JavaScript書いていると、「DOMを非表示にしておいて、特定条件で表示する」みたいなのってよく書きます。
一個一個は単純でも、複数になるとそこそこ面倒。。。

今回は、この非表示にする方法にフォーカスしてみるやつです。
なんでもかんでもdisplay: none;使ってない！？ちょっと考えて使おうね！が趣旨。

CSSで非表示する方法

以下の3つ。

display:noneはおなじみですね。
他は？opacityはなんとなく使ったことあるけど、visibilityってあまり馴染みないような。

だけど、意外と使い分けが大事な場面もあったり。
それぞれ違いを見ていきます。

まずdisplay:none。
display:noneのデモ触ってもらえば分かると思いますが、DOMが消えて、「高さ」なども消滅しています。

次にvisibility: hidden。
visibility: hiddenのデモ
display:noneと違って、表示は消えても「高さ」などは残っていることが分かります。

最後にopacity:0。
opacity: 0のデモ
これも表示は消えて、「高さ」などは残ることが分かります。

ここまでで分かるのは、がっつり消してしまいたいならdisplay: none。
高さとか残しときたいならvisibility: hiddenかopacity: 0ってな具合でしょう。

これだけなら好みでどうぞ！って感じなんですが、そんなわけないです。

次にそれぞれにイベントを付与してみます。
toggleを押す前、押した後で、clickしてみると違いが浮き彫りに。

display: noneはそもそも何もないので、イベントはおきない。
visibility: hiddenも同じくイベントはおきない。
opacity: 0だけはイベントが発生。

opacityは透過度を指定しているだけなので、実態はそこにある状態。
なのでイベントも効いてきますね(考えてみたら当然)。

対象にイベントが付与されている場合は、display:noneか、visibility:hidden。
一昔前の隠しリンク的なのがやりたいならopacity:0ですね。

まずGetSizeして、toggleしてGetSizeしてみると分かると思いますが。
display: noneだとサイズもポジションも取れないので、DOMのポジション使って何かするような処理書いてる場合は注意です。

例えば、対象要素の真下にドロップダウンリスト出すーとか、そんなパターンのやつ。

サンプル書いて、こうやって並べてみると当たり前に思えるけど、実際ハマることがあるので、
何が適切か考えながら使おうねって話でした。