jQuery .hide()と.css( "display"、 "none")の違い


81

違いはありますか

jQuery('#id').show() and jQuery('#id').css("display","block")

そして

jQuery('#id').hide() and jQuery('#id').css("display","none")

回答:


95

jQuery( '#id')。css( "display"、 "block")

displayプロパティがあり、その中の多くの可能な値を持つことができblockinlineinline-block、そしてより多くの

この.show()メソッドはblock、必ずしもに設定する必要はありませんが、定義したものにリセットします(ある場合)。

jQueryのソースコードでは、あなたは彼らが設定しているかを確認することができますdisplay:それはすべてのjQueryの操作の前だったかどうか確認するために「」(空文字列)にプロパティを少しリンク

一方、非表示はを介して行われるdisplay: none;ため、ある点を考慮.hide()して.css("display", "none")同等にすることができます。

とにかく.show().hide()落とし穴を避けるために使用することをお勧めします(さらに、それらはより短いです)。


3
包括的なチェックの表示/非表示の実行により、メソッドはかなり遅くなります。メソッドを繰り返し呼び出す場合は、cssメソッドを使用することをお勧めします。
gqqnbig 2016

33

show()とcss({'display': 'block'})の違い

あなたが最初にこれを持っていると仮定して:

<span id="thisElement" style="display: none;">Foo</span>

あなたが電話するとき:

$('#thisElement').show();

あなたが得るでしょう:

<span id="thisElement" style="">Foo</span>

一方:

$('#thisElement').css({'display':'block'});

します:

<span id="thisElement" style="display: block;">Foo</span>

ですから、違いがあります。

hide()とcss({'display': 'none'})の違い

上記と同じですが、これらをhide()に変更し、 ':' none '.....を表示します。

もう一つの違いは、 とき.hide()ときに、jQueryのデータ・キャッシュに保存された表示プロパティの値と呼ばれる.show()と呼ばれ、初期表示値が復元されます!


6

A:はい、両方の性能に差がある jQuery('#id').show()よりも遅いjQuery('#id').css("display","block")ディスプレイとしてjqueryのキャッシュから初期状態を取得するために行う必要があり、前者の場合余分な作業のようにはそれができるバイナリ属性ではありませんinlineblocknonetable、などと類似のhide()メソッドの場合です。

参照:http//jsperf.com/show-vs-addclass


2
また、ページで表示と非表示が多すぎると、パフォーマンスが重要になります。
アクアサン2013年

4

変わりはない

パラメータがない場合、.hide()メソッドは要素を非表示にする最も簡単な方法です。

$( '。target')。hide(); 一致した要素は、アニメーションなしですぐに非表示になります。これは、.css( 'display'、 'none')を呼び出すのとほぼ同じですが、displayプロパティの値がjQueryのデータキャッシュに保存され、後でdisplayを初期値に復元できるようになります。要素の表示値がインラインの場合、非表示にして表示すると、再びインラインで表示されます。

ショーについても同じ


それ.show()が適切なdisplayプロパティを設定することを除いて、適切なプロパティを手動で選択する必要がありますが、.css()
Cerbrus 2012年

3

はい、違いがあります。

jQuery('#id').css("display","block") 常にブロックとして表示したい要素を設定します。

jQuery('#id').show() will etは、最初はどのディスプレイタイプであったか、たとえば、ディスプレイ:インラインです。

JqueryDocを参照してください


これは、jQueryの新しいバージョンにのみ当てはまることに注意してください。たとえば、1.3はこれには当てはまりません。
トロイアルフォード2012年

2

ソースコード(ここではv1.7.2)を見ることができます。

我々が設定することができ、アニメーションを除いて、これはまた、メモリ内の古い表示スタイルキープ(すべてのケースではないがblock、それはまたすることができinlinetable-cell...)。


1

http://api.jquery.com/show/を参照してください

パラメータがない場合、.show()メソッドは要素を表示する最も簡単な方法です。

$( '。target')。show();

一致した要素は、アニメーションなしですぐに表示されます。これは、displayプロパティが最初の状態に復元されることを除いて、.css( 'display'、 'block')を呼び出すのとほぼ同じです。要素の表示値がインラインの場合、非表示にして表示すると、再びインラインで表示されます。


いい説明..ありがとう:)
Sashi Kant
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.