はじめに
要素を見えなくする操作は結構いろんなところで使うと思うのですが、
今までなんとなーくで使っていたので、頭の整理のためにもまとめてみました。
説明
比較プロパティ
-
opacity: 0;...要素の透明度を指定する際に使用 -
visibility: hidden;...ボックスの表示（visible）・非表示（hidden）を指定する際に使用 -
display: none;...要素の表示形式を指定する際に使用
比較方法
- 1,cursor:pointerをつけた時のカーソルの変化
- 2,jQueryでonメソッドを使ったクリックイベントの取得
- 3,isメソッドで(':visible')を指定した時の結果
- 4,要素自体がレイアウトに与える影響の有無
結果
| プロパティ | 1.cursor変化 | 2.クリックイベント取得 | 3.:visible判定 | 4.レイアウト影響 |
|---|---|---|---|---|
| opacity: 0 | ○ | ○ | true | ある |
| visibility :hidden | × | × | true | ある |
| display: none | × | × | false | ない |
opacity: 0
- 1,cursor: かわる
- 2,jsクリックイベント: とれる
- 3,:visibleでの判定: true
- 4,レイアウト: 高さ、幅がある
解説
透明になるだけ。クリックやホバーなどのイベントは発火するので、視覚的に見えなくするだけの時や、イベントはとりたいが要素を表示させたくない時などに使用。
jQueryでの指定方法
fadeIn();
fadeout();
visibility :hidden
- 1,cursor: かわらない
- 2,jsクリックイベント: とれない
- 3,:visibleでの判定: true
- レイアウト: 高さ、幅がある
解説
要素によってイベント発火はさせたくないけど、レイアウトも変えたくない時に使用。
ただし逆に残った高さや幅が無駄な空白の原因になることも。
jQueryでの指定方法
独自のものはないため、cssメソッドで指定
css('visibility','hidden');
css({'visibility':'visible'});
display: none
- 1,cursor: かわらない
- 2,jsクリックイベント: とれない
- 3,:visibleでの判定: false
- 4,レイアウト: 高さ、幅がない
解説
高さや横幅などもないものとみなされ、次の要素がつまる。領域が確保されない（開発者ツールでは存在するし、JSで高さはとれる）
高さ幅も消してしまいたい時に使用。
jQueryでの指定方法
.hide();
.show();