Masquer un élément après quelques secondes en utilisant JavaScript
Lors de la conception d'une page Web réactive, il peut y avoir une exigence pour masquer certaines fonctionnalités supplémentaires après un certain temps pour créer des effets. Par exemple, l'alerte d'un utilisateur via le message contextuel pendant un temps limité fait des merveilles pour attirer l'attention de l'utilisateur, s'abstenir ainsi d'être offensé. Dans de tels scénarios, cacher un élément après quelques secondes à l'aide de JavaScript aide à faire en sorte qu'une page Web ou le site se démarque.
Ce tutoriel expliquera le concept de cachette d'un élément après quelques secondes en utilisant JavaScript.
Comment cacher un élément après quelques secondes en javascript?
Les approches suivantes peuvent être utilisées pour cacher un élément après quelques secondes en utilisant JavaScript:
- "setTimeout ()«Méthode avec le«afficher" propriété.
- "setTimeout ()«Méthode avec le«visibilité" propriété.
- "jquery«Méthodes.
Discutons des approches énoncées une par une!
Approche 1: Masquer un élément après quelques secondes en JavaScript à l'aide de la méthode Settimeout () With la propriété d'affichage
Le "setTimeout ()»La méthode invoque une fonction après l'heure assignée spécifiée. Tandis que le "afficher»La propriété définit le type d'affichage de l'élément spécifié. Ces approches peuvent être implémentées pour allouer un temps défini à l'élément récupéré afin qu'il se cache après l'heure spécifiée.
Syntaxe
Settimeout (Func, Milli, PAR1, PAR2)Dans la syntaxe donnée ci-dessus:
- "func»Indique la fonction qui doit être accessible.
- "milli»Correspond à l'intervalle de temps en millisecondes à exécuter.
- "par1" et "par2»Poignez les paramètres supplémentaires.
Dans la syntaxe ci-dessus:
- La propriété d'affichage du «Objet"Est attribué comme"aucun".
Exemple
L'exemple suivant illustre le concept déclaré:
Appliquez les étapes ci-dessous, comme indiqué dans le code ci-dessus:
- Tout d'abord, incluez un «”Élément ayant le"SRC" et "identifiant"Comme ses attributs.
- Dans le code JS, appliquez le «setTimeout ()»Méthode aux lignes de code indiquées. L'heure définie, dans ce cas, sera de 5000 millisecondes = "5»Secondes.
- Dans la méthode, accédez à l'élément inclus par son «identifiant" en utilisant le "getElementByid ()" méthode.
- Après cela, affectez le «afficher»Propriété associée à l'élément récupéré comme«aucun".
- Cela cachera en conséquence le «»Élément après 5 secondes du modèle d'objet document (DOM).
Sortir
Comme observé dans la sortie ci-dessus, l'inclus ""L'élément se cache après"5»Secondes.
Approche 2: Masquer un élément après quelques secondes en JavaScript à l'aide de la méthode SetTimeout () avec la propriété de visibilité
Le "visibilité»La propriété définit la visibilité d'un élément. Cette propriété peut être appliquée combinée avec le «setTimeout ()”Méthode pour masquer l'élément récupéré après l'heure de réglage.
Syntaxe
Objet.style.Visibilité = «cachée»Dans cette syntaxe:
- La visibilité du spécifié «Objet"Est attribué comme"caché".
Exemple
Passons par l'exemple ci-dessous:
| IDENTIFIANT | Nom | Âge |
|---|---|---|
| 1 | David | 18 |
Effectuez les étapes suivantes, comme indiqué dans les lignes de code ci-dessus:
- Inclure le "
"Élément ayant les attributs"frontière" et "identifiant".
- Contiennent également les valeurs indiquées dans le tableau dans le «
"," ", et " " Mots clés. - Dans le code JavaScript, de même, appliquez le «setTimeout ()«Méthode avec un temps défini de«3»Secondes.
- Après cela, invoquez le «getElementByid ()«Méthode pour récupérer l'élément inclus, comme discuté.
- Enfin, appliquez le «visibilité«Propriété et alloue comme«caché". Cela cachera l'élément associé après 3 secondes.
Sortir
Dans la sortie ci-dessus, il est évident que le «tableau»L'élément se cache après l'heure définie.
Approche 3: Masquer un élément après quelques secondes en JavaScript à l'aide de méthodes jQuery
Le "jquery"La méthode peut être appliquée pour masquer l'élément correspondant en le récupérant directement et en le faisant disparaître après l'heure supplémentaire.
Exemple
Présentation de l'exemple suivant:
Ceci est le site Web de Linuxhint
Dans l'extrait de code ci-dessus:
- Inclure le "jquery»Bibliothèque pour utiliser ses méthodes.
- Inclure le ""Élément ayant le déclaré"identifiant".
- Dans le code JS, accédez à l'élément inclus directement en utilisant son identifiant.
- Après cela, appliquez le «montrer()”Méthode, qui affichera l'élément récupéré.
- Le "retard()" et le "disparaître()«Des méthodes seront appliquées en combinaison pour masquer l'élément associé après le délai défini (« «5«Secondes).
Sortir
La sortie ci-dessus signifie que le texte ajouté est caché après cinq secondes.
Conclusion
Le "setTimeout ()«Méthode avec le«afficher»Propriété, le«setTimeout ()«Méthode avec le«visibilité«Propriété, ou le«jquery«Les méthodes peuvent être utilisées pour masquer un élément après quelques secondes en JavaScript. La méthode setTimeout () combinée avec la propriété d'affichage ou de visibilité peut masquer l'élément récupéré après l'heure définie. Tandis que les méthodes jQuery peuvent récupérer l'élément directement, l'afficher, puis la cacher en la décollant. Cet article a expliqué comment masquer un élément après quelques secondes en utilisant JavaScript.
- « Obtenez l'élément par ID par une chaîne partiellement correspondante à l'aide de JavaScript
- Python Tarfile »
- Contiennent également les valeurs indiquées dans le tableau dans le «