En JavaScript, on peut masquer les éléments en utilisant le style.affichage ou en utilisant le style.visibilité . Le visibilité La propriété en JavaScript est également utilisée pour masquer un élément. La différence entre le style.affichage et style.visibilité c'est lors de l'utilisation visibilité : cachée, la balise n'est pas visible, mais de l'espace est alloué. En utilisant affichage : aucun, la balise n'est pas non plus visible, mais aucun espace n'est alloué sur la page.
En HTML , on peut utiliser le caché attribut pour masquer l’élément spécifié. Quand le caché l'attribut HTML est défini sur true, l'élément est masqué ou lorsque la valeur est FAUX, l'élément est visible.
index de la liste
Syntaxe
La syntaxe générale pour masquer un élément en utilisant style.caché et style.visibilité est donnée comme suit.
En utilisant style.caché
python ou
document.getElementById('element').style.display = 'none';
En utilisant style.visibilité
document.getElementById('element').style.visibility = 'none';
Voyons maintenant quelques exemples pour comprendre le masquage d'éléments dans javascript .
Exemple 1
Dans cet exemple, nous verrons comment supprimer des éléments en utilisant le langage JavaScript style.affichage propriété. Ici, il y a un div élément et un élément de paragraphe qui se cache en cliquant sur l'élément donné Bouton HTML . Nous devons cliquer sur le « Cliquez sur moi ! » bouton pour voir l’effet.
style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Testez-le maintenant Sortir
alphabet numéroté
Dans le résultat, nous pouvons voir que le div élément (sur lequel nous avons appliqué style.visibilité propriété) se cache mais alloue toujours l'espace. Mais la rubrique (sur laquelle nous avons appliqué style.affichage propriété) se cache et n’alloue aucun espace.
Après avoir cliqué sur le bouton, le résultat sera -
