JavaScript Masquer/Afficher les éléments

1. Utilisez la propriété style.visibility pour masquer/afficher les éléments HTML
2. Utilisez la propriété style.display pour masquer/afficher les éléments HTML
3. Utilisez hide() / show() de jQuery pour masquer/afficher les éléments HTML
4. Utilisez jQuery toggle() pour masquer/afficher les éléments HTML
5. Utilisez addClass()/removeClass() pour masquer/afficher les éléments HTML

Nous rencontrons souvent des situations où nous voulons basculer entre l’affichage et le masquage d’un élément. Ce tutoriel présente comment masquer/afficher un élément en JavaScript.

Utilisez la propriété style.visibility pour masquer/afficher les éléments HTML

La propriété style.visibility, lorsqu’elle est définie sur masqué, masque l’élément cible, mais ne le supprime pas du flux. Ainsi, l’élément cible est rendu mais pas visible. Il n’affecte pas l’aménagement et permet aux autres éléments d’occuper leur espace naturel. Nous pouvons rendre l’élément cible à nouveau visible en redéfinissant la propriété sur visible.

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

Utilisez la propriété style.display pour masquer/afficher les éléments HTML

La propriété style.display, lorsqu’elle est définie sur none, supprime l’élément cible du flux normal de la page et permet au reste des éléments d’occuper son espace. Bien que l’élément cible ne soit pas visible sur la page, nous pouvons toujours interagir avec lui via DOM. Tous les descendants sont affectés et ne sont pas affichés comme l’élément parent. Nous pouvons rendre l’élément cible à nouveau visible en définissant la propriété sur block. Il est conseillé de mettre display à '' car block ajoute une marge à un élément.

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

Utilisez hide() / show() de jQuery pour masquer/afficher les éléments HTML

La méthode show() nous aide à afficher les éléments masqués via la méthode display:none ou jQuery hide(). Il n’est pas en mesure d’afficher les éléments dont la visibilité est masquée. Il accepte les trois paramètres suivants :

1. Speed : Il spécifie la vitesse de retard de l’effet de fondu.
2. Easing : Il spécifie la fonction d’assouplissement utilisée pour passer à un état visible/caché. Il prend deux valeurs différentes : swing et linear.
3. Callback : C’est une fonction exécutée une fois l’exécution de la méthode show() terminée.

De même, la méthode jQuery hide() permet de masquer les éléments sélectionnés. Il prend les mêmes paramètres 3 que show().

$('#element').hide();  // hide
$('#element').show();  // show

Utilisez jQuery toggle() pour masquer/afficher les éléments HTML

Le jQuery toggle() est une méthode spéciale qui nous permet de basculer entre la méthode hide() et show(). Cela aide à rendre les éléments cachés visibles et les éléments visibles cachés. Il prend également les mêmes trois paramètres que les méthodes hide() et show() de jQuery. Il prend également un 4ème affichage de paramètre qui permet de basculer l’effet masquer/afficher. Il s’agit d’un paramètre booléen qui, lorsqu’il est défini sur false, masque l’élément.

$('div.d1').toggle(500, swing);  // toggle hide and show

Utilisez addClass()/removeClass() pour masquer/afficher les éléments HTML

La fonction addClass() nous aide à ajouter une classe à la liste de classes existante d’un élément, et removeClass() nous aide à la supprimer. Nous pouvons utiliser ces fonctions pour basculer masquer/afficher en écrivant une classe personnalisée qui masque l’élément, puis en l’ajoutant et en le supprimant de la liste des classes.

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show