display:noneとvisiblity:hiddenの違い

どうも。原田です。

今回はフロント側についての記事を書こうと思います。

 

「この時はこれ表示して、そっちの時はそっちを表示させたい」

という、瞬間がありました。

そこで、先輩からjQueryでshow()とhide()にさせちゃいなよと言われ、

言われるがままにしてうまくいったのですが。

 

jQuery書いてる時の私の頭の中は、

「hide()しちゃってる時、その部分が真っ白になって場所だけとっちゃてて不自然に見えないのか・・・」

という不安がありました。

お気付きの通り、visiblity:hiddenの状態になっちゃはないかというバカなことを考えをしてました。

もちろん、hide()はdisplay:noneとなるメソッドです。

 

 

そこで、私の頭の中の整理

display:none  ←hide()の時
エレメントが表示エリアから消える。DOMとしては存在するが描画されない
→場所とらない

 

visiblity:hidden
エレメントは描画されない。しかし表示エリアは「残る」。背景色で塗りつぶした感じ
→場所とっちゃてるまま