.hide() ou display: none? jQuery
7 réponses
De jQuery page sur .hide() :
" les éléments assortis seront immédiatement cachés, sans animation. C'est à peu près équivalent à l'appel .css ('display',' none'), sauf que la valeur de la propriété display est sauvegardée dans le cache de données de jQuery de sorte que display peut être restauré plus tard à sa valeur initiale. Si un élément a une valeur display De inline, puis est caché et affiché, il sera de 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() parce que de cette façon l'état précédent est rappelé. 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> .hide() stocke la précédente display propriété juste avant de le mettre à none , donc si ce n'était pas la norme display propriété pour l'élément vous êtes un peu plus sûr, .show() va utiliser cette propriété stockée comme quoi retourner. Donc...il fait un peu de travail supplémentaire, mais à moins que vous ne fassiez tonnes d'éléments, la différence de vitesse devrait être négligeable.
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;
}
},
Ils sont la même chose. .hide() appelle une fonction jQuery et vous permet d'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 faites ce qui suit en JavaScript:
document.getElementById('elementId').style.display = 'none';
la fonction .hide() prend évidemment plus de temps à exécuter car elle vérifie les fonctions de rappel, la vitesse, etc...
utiliser les deux est une belle réponse; ce n'est pas une question de l'un ou l'autre.
le avantage d'utiliser les deux est que le CSS cachera l'élément immédiatement lorsque la page se charge. Le jQuery .hide flash l'élément pendant un quart de seconde puis le cacher.
dans le cas où nous voulons avoir l'élément non indiqué lorsque la page se charge nous pouvons utiliser CSS et set display:none et utiliser le jQuery .cacher.)( Si nous projetons de basculer l'élément, nous pouvons utiliser jQuery toggle.
les deux font la même chose sur tous les navigateurs, AFAIK. Vérifié sur Chrome et Firefox, les deux ajoutent display:none à l'attribut style de l'élément.
voir il n'y a pas de différence si vous utilisez la méthode de base hide. Mais jquery fournit divers méthode de cache qui donnent des effets à l'élément. Voir le lien ci-dessous pour une explication détaillée: effets pour la peau en Jquery