web-dev-qa-db-ja.com

.hide（）または表示：なしjQuery

どっちがいい？ .hide()は.css("display","none")を書き出すよりも速いですが、違いは何ですか、そしてそれら両方がHTML要素に対して実際に何をしているのでしょうか？

javascriptjquerycssshow-hide
145
benhowdle89

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>
195
Stephan Muller

.hide() は、（displayname__）に設定する直前に前のnonename__プロパティを格納します。そのため、標準のdisplayname__プロパティではない場合もう少し安全な要素 .show() は、保存されたプロパティを元に戻すものとして使用します。それで...それはいくらかの余分な仕事をします、しかしあなたが要素のトンをしていない限り、速度の違いは無視できるべきです。

31
Nick Craver

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;
    }
},
13
Spiny Norman

それらは同じものです。 .hide()はjQuery関数を呼び出し、それにコールバック関数を追加することを可能にします。そのため、.hide()を使えば、例えばアニメーションを追加することができます。

.css("display","none")は、要素の属性をdisplay:noneに変更します。 JavaScriptで次のようにしたのと同じです。

document.getElementById('elementId').style.display = 'none';

.hide()関数は、コールバック関数、速度などをチェックするため、実行に時間がかかるのは明らかです。

11
seedg

bothを使うのはいい答えです。どちらの質問でもありません。

両方を使用することの利点は、ページが読み込まれるときにCSSが要素をすぐに隠すということです。 jQueryの.hideは、4分の1秒間要素をフラッシュしてから非表示にします。

ページの読み込み時に要素を表示しないようにする場合は、CSSを使用してdisplayを設定します。none＆jQuery .hide（）を使用します。要素を切り替える予定がある場合は、jQueryトグルを使用できます。

4
Catto

どちらも、すべてのブラウザで同じことをしています。 ChromeとFirefoxでチェックし、両方とも要素のstyle属性にdisplay:noneを追加します。

1
Klemen Slavič