☰

jQuery の .hide() と CSS の display: none 設定の違い 質問する

tag-icon • tag-icon javascript jquery html css show-hide
jQuery の .hide() と CSS の display: none 設定の違い 質問する

どちらを実行したほうがよいでしょうか?.hide()と記述するよりも速いです.css("display", "none")が、違いは何でしょうか。また、実際には両方とも HTML 要素に対して何を実行しているのでしょうか。

ベストアンサー1

jQueryのページから。隠れる（）:

「一致した要素は、アニメーションなしですぐに非表示になります。これは、.css('display', 'none') を呼び出すのとほぼ同じですが、display プロパティの値は jQuery のデータ キャッシュに保存されるため、後で display を初期値に復元できます。要素の display 値が 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>

おすすめ記事