web-dev-qa-db-fra.com

Différence entre .hide () de jQuery et réglage de CSS pour afficher: aucun

Qu'est-ce que je ferais mieux de faire? .hide() est plus rapide que d'écrire .css("display", "none"), mais quelle est la différence et que font-ils réellement à l'élément HTML?

javascriptjqueryhtmlcssshow-hide
148
benhowdle89

De la page jQuery à propos de . Hide () :

"Les éléments correspondants seront immédiatement masqués, sans aucune animation. Ceci équivaut approximativement à appeler .css ('display', 'none'), sauf que la valeur de la propriété display est enregistrée dans le cache de données de jQuery afin que l'affichage puisse ultérieurement être restauré à sa valeur initiale. Si un élément a une valeur d'affichage inline, alors il est masqué et affiché, il sera à nouveau affiché inline. "

Donc, s'il est important que vous puissiez revenir à la valeur précédente de display, vous feriez mieux d'utiliser hide() car de cette manière, l'état précédent est mémorisé. En dehors de cela, il n'y a pas de différence.

$(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>
199
Stephan Muller

.hide() stocke la propriété précédente display juste avant de la définir sur none, donc si elle ne l'était pas La propriété standard display de l’élément que vous êtes un peu plus en sécurité, .show() utilisera cette propriété stockée comme référence. Donc ... cela demande un peu plus de travail, mais à moins que vous ne fassiez des tonnes d'éléments, la différence de vitesse devrait être négligeable.

33
Nick Craver

En regardant le code jQuery, voici ce qui se passe:

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

Ce sont les mêmes choses. .hide() appelle une fonction jQuery et vous permet de lui ajouter une fonction de rappel. Ainsi, avec .hide(), vous pouvez ajouter une animation par exemple.

.css("display","none") change l'attribut de l'élément en display:none. C'est la même chose que si vous procédez comme suit en JavaScript:

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

La fonction .hide() prend évidemment plus de temps à s'exécuter car elle vérifie les fonctions de rappel, la vitesse, etc.

11
seedg

Utiliser les deux est une bonne réponse; ce n'est pas une question de ou.

Le avantage d'utiliser les deux est que le CSS cachera l'élément immédiatement au chargement de la page. JQuery .hide fera clignoter l’élément pendant un quart de seconde puis le masquera.

Dans le cas où nous souhaitons que l'élément ne soit pas affiché lors du chargement de la page, nous pouvons utiliser CSS et définir display: none & utiliser la méthode jQuery .hide (). Si nous prévoyons de basculer l'élément, nous pouvons utiliser la bascule jQuery.

4
Catto

Les deux font la même chose sur tous les navigateurs, autant que je sache. Coché sur Chrome et Firefox, les deux ajoutent display:none à l'attribut style de l'élément.

1
Klemen Slavič