displayプロパティ
状態:-
閲覧数:2,176
投稿日:2014-07-09
更新日:2014-07-09
ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
・値は全17種類の中から1つ指定可能
※以下抜粋
ボックスの表示（visible）・非表示（hidden）を指定する際に使用
・値は全3種類の中から1つ指定可能
・値は全17種類の中から1つ指定可能
※以下抜粋
| 値 | 効果 | 表示非表示 |
|---|---|---|
| inline | インラインボックス生成（初期値） | 表示 |
| block | ブロックボックス生成 | 表示 |
| inherit | 親要素の値を継承 | 親依存 |
| none | 要素は表示されない。描画エリアも確保されない(レイアウト影響あり) | 非表示 |
visibilityプロパティ
ボックスの表示（visible）・非表示（hidden）を指定する際に使用
・値は全3種類の中から1つ指定可能
| 値 | 効果 | 表示非表示 |
|---|---|---|
| visible | ボックス表示 | 表示 |
| collapse | テーブル（表）の行や列にこの値を指定すると、その部分を詰めて表示 | 表示 |
| hidden | 要素は表示されないが、描画エリアは確保される(レイアウト影響なし) | 非表示 |
jQueryでCSS表示非表示関連プロパティを操作 ／ 同義処理を実施するメソッド
一覧表
| メソッド名 | 効果 | 表示非表示 |
|---|---|---|
| show() | 表示 | 表示 |
| toggle() | 表示していたら非表示へ、非表示なら表示へ変更 | 現状に依存 |
| hide() | display:noneと同義 | 非表示 |
$("セレクタ記述").css("display", "none"); $("セレクタ記述").hide(); 下記は上記とは意味が異なる
・「visibility:hidden」に該当するjQuery独自メソッドは存在しない
$("セレクタ記述").css("visibility","hidden"); displayプロパティ
inline
$("セレクタ記述").css("display", "inline"); none
$("セレクタ記述").css("display", "none"); visibilityプロパティ
visible
$("セレクタ記述").css("visibility","visible"); hidden
$("セレクタ記述").css("visibility","hidden"); jQueryメソッド
show()
$("セレクタ記述").show(); hide()
$("セレクタ記述").hide(); ・display:none;と同義
・要素は表示されない
・描画エリアも確保されない(レイアウト影響あり)
toggle()
$("セレクタ記述").toggle(); ・各要素のうち、「表示状態にあるものは非表示」、「非表示状態にあるものは表示状態」へ変更
「display: none」と「visibility:hidden」では何が違うの？
display: none
スペース確保
・✕
表示
・✕
visibility:hidden
スペース確保
・◯
表示
・✕
「display: none」と「jQuery hide()メソッド」では何が違うの？
以前表示していた値へ戻す場合
・hide()メソッドの方が良い
・hide()メソッドオプション一覧
・jQuery – いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する
・jQueryのセレクタ解説