2012-01-10 14 views
17

element.css('visibility', 'visible')element.show()の違いは何ですか?また、element.css('visibility', 'hidden')element.hide()の違いは何ですか?可視性と非表示の設定

更新:また、要素そのすべての要素のサブツリーを隠すために最も適切な方法は何ですか?

更新N2element.is(':visible')またはelement.css('visibility'):要素(およびそのサブツリー)が表示されているかどうかを知るための適切な方法は何ですか?

更新N3:要素を(完全に)非表示にする方法はありますか?ただし、ブラウザのページにはまだ領域/領域が予約されていますか? (私はそれを持っている限り - 正しい方法はhide()を呼び出すことであろうが、それはページの視覚的再編につながる可能性がある

+2

要素が非表示になっている場合(すべての方法で)、すべての子孫も非表示になります。また、 '.hide()'ドキュメントから:* "これは' .css( 'display'、 'none') '[...] '*を呼び出すのとほぼ同じです。 –

+1

関連:[表示と非表示の違いは何ですか?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) –

+0

質問する3つの質問は、私は確信している、いくつかは既に答えられている。 –

答えて

18

可視性は、まだあなたのブラウザのスペースを確保します

隠し要素があります。 display: noneすることは、この要素によって占有されているすべてのスペースが崩壊設定。 だけvisibility: hiddenに要素を設定した場合の要素は、単に透明になりますが、要素がまだそこにあるかのようにスペースが占有されている。

.hide().css('display', 'none')
に等しいです .show()と等しいから.css('display', 'block')です - 実際にはblockであるかどうかを判断するには、jQueryがここにいくつかの魔法をかけていますが、やや同等です。

@Update:
あなたは.hide()(または.css('display', 'none'))を持つ要素を非表示にしたら、その要素の子であるDOMツリーダウンすべての要素があまりにも非表示になります。

@Update 2:
あなたは.hide().show()を使用している場合は、その後.css('visibility')

@Update 3を可視CSS属性を使用している場合、それは.is(':visible') です:.css('visibility', 'hidden')はまったく同じものだ
、ページの再構成を行わずに要素を非表示にします。 .hide()は完全に"削除"要素です。

+0

ちょうど補遺:私がそれを使った限り、「可視性:隠し」は再帰的ではありません。要素(ただし、サブツリー全体ではない)のみが非表示になります。 – BreakPhreak

+1

別の補遺: 'visibility:hidden'の場合、' is( ':visible') 'は' true'を返します。 – BreakPhreak

1

W3Cから撮影:

可視性:隠された要素を隠しますが、それはまだ前と同じスペースを占有します。要素は非表示になりますが、レイアウトにはまだ影響します。

display:noneは要素を隠し、スペースを占有しません。要素が非表示になり、その要素がないとページが表示されます。

3

jquery.hide().css('display', 'none')を呼び出すのと同じであるとし、jquery.show.css()方法がちょうど可視性プロパティを設定されて.css('display', 'block')

を呼び出すことと同じです。

ビュー差のCSSの観点から:

visbility : hidden 

隠された値は、レイアウトからそれらを削除せずに生成されたボックスが見えなくなります。降順のボックスを表示することができます。 See this

display : none 

なしの値は、要素がまったくボックスを生成しないことができます。子孫ボックスは、その表示プロパティがnone以外に設定されていても、ボックスを生成することはできません。 See this

hidden要素がまだ生成されています。

1

hide/showはdisplayプロパティをnoneに設定し、showはこの設定を削除してデフォルトを使用するようにします(divの場合は 'block'など)。

他の回答との相違点は、要素上のhideを呼び出すと、その要素(およびそのすべての祖先)がスペースを占有しないということです。 visibilityからhiddenという設定は、効果的に要素を完全に透明にするだけですが(まだ空間を占有します)。編集内容への回答については

  1. は(これは自動的に両方の方法で行われている)すべての祖先を非表示にします。
  2. 使用element.is(':visible')これは両方visibilitydisplayプロパティのチェックを実行し、heightwidthが0でないかどうかを確認するために以来element.css('visibility')はちょうどあなたの要素のvisibilityを伝える一方で、それはまた、先祖に再帰的にそれを実行します。
  3. を呼び出さずにelement.css('visibility', 'hidden')を設定します。 「:なし表示」と「可視性:隠された」「:なし表示」および「隠す」ボタンセット」 http://www.w3schools.com/css/css_display_visibility.asp

    ボタンセットを「削除」ここbardiirの説明に加えて

1

はの良いデモです可視性:隠された "。

関連する問題