どっちがいい? .hide()
は.css("display","none")
を書き出すよりも速いですが、違いは何ですか、そしてそれら両方がHTML要素に対して実際に何をしているのでしょうか?
JQueryのページから 。hide() :
「一致した要素は、アニメーションなしですぐに非表示になります。これは、displayプロパティの値がjQueryのデータキャッシュに保存され、後で表示できるようになる点を除いて、.css( 'display'、 'none')の呼び出しとほぼ同じです。要素の表示値がinlineである場合、その要素は非表示にされて表示され、再びインラインで表示されます。」
したがって、display
の以前の値に戻すことができることが重要な場合は、hide()
を使用したほうがよいでしょう。そのようにすると、以前の状態が記憶されます。それ以外は違いはありません。
$(function() {
$('.hide').click(function(){
$('.toggle').hide();
setDisplayValue();
});
$('.show').click(function(){
$('.toggle').show();
setDisplayValue();
});
});
function setDisplayValue() {
var display = $('.toggle')[0].style.display;
$('.displayvalue').text(display);
}
div {
display: table-cell;
border: 1px solid;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button class="hide">Hide</button>
<button class="show">Show</button>
</p>
<div class="toggle">Lorem Ipsum</div>
<p>
The display value of the div is:
<span class="displayvalue"></span>
</p>
JQueryコードを見ると、これが起こります。
hide: function( speed, easing, callback ) {
if ( speed || speed === 0 ) {
return this.animate( genFx("hide", 3), speed, easing, callback);
} else {
for ( var i = 0, j = this.length; i < j; i++ ) {
var display = jQuery.css( this[i], "display" );
if ( display !== "none" ) {
jQuery.data( this[i], "olddisplay", display );
}
}
// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( i = 0; i < j; i++ ) {
this[i].style.display = "none";
}
return this;
}
},
それらは同じものです。 .hide()
はjQuery関数を呼び出し、それにコールバック関数を追加することを可能にします。そのため、.hide()
を使えば、例えばアニメーションを追加することができます。
.css("display","none")
は、要素の属性をdisplay:none
に変更します。 JavaScriptで次のようにしたのと同じです。
document.getElementById('elementId').style.display = 'none';
.hide()
関数は、コールバック関数、速度などをチェックするため、実行に時間がかかるのは明らかです。
bothを使うのはいい答えです。どちらの質問でもありません。
両方を使用することの利点は、ページが読み込まれるときにCSSが要素をすぐに隠すということです。 jQueryの.hideは、4分の1秒間要素をフラッシュしてから非表示にします。
ページの読み込み時に要素を表示しないようにする場合は、CSSを使用してdisplayを設定します。none&jQuery .hide()を使用します。要素を切り替える予定がある場合は、jQueryトグルを使用できます。
どちらも、すべてのブラウザで同じことをしています。 ChromeとFirefoxでチェックし、両方とも要素のstyle
属性にdisplay:none
を追加します。