web-dev-qa-db-ja.com

jQuery .hide（）と.css（ "display"、 "none"）の違い

間に違いはありますか

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

そして

jQuery('#id').hide() and jQuery('#id').css("display","none")
javascriptjquerycss
77
Sashi Kant

jQuery（ '＃id'）。css（ "display"、 "block"）

displayプロパティーには、block、inline、inline-block、および その他 のような多くの値を設定できます。

.show()メソッドは、必ずしもblockに設定するのではなく、定義したものにリセットします（もしあれば）。

JQueryソースコードで、displayプロパティを ""（空の文字列）に設定し、jQuery操作前の状態を確認する方法を確認できます： little link 。

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

とにかく.show()と.hide()を使用することをお勧めします（さらに短い）。

90
Chris

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（）およびdisplay '：' none '......に変更します.

別の違い.hide()が呼び出されると、表示プロパティの値がjQueryのデータキャッシュに保存されるため、.show()が呼び出されると、初期表示値が復元されます！

32
Talha

はい、両方のパフォーマンスに違いがあります：ディスプレイはバイナリ属性ではないため、jqueryキャッシュから初期状態を取得するために余分な作業が行われるため、jQuery('#id').show()はjQuery('#id').css("display","block")より遅いですinline 、block、none、tableなど。hide()メソッドの場合も同様です。

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

6
aquasan

差なし

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

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

ショーについても同じ

4
Arsen Mkrtchyan

はい、違いがあります。

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

jQuery('#id').show()は、最初の表示タイプ、たとえばdisplay：になります。

Jquery Doc を参照してください

3
Jonas Ibsen

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

設定できるアニメーションを除いて、これはメモリ内に古い表示スタイルを保持します（すべての場合にblockではなく、inline、table-cell、...でもかまいません）。

2
Samuel Caillerie

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

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

$（ '。target'）。show（）;

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

1
Corinne Kubler