Comment afficher ou masquer un élément sur le site Web à l'aide de JavaScript
Tout au long du développement Web, les utilisateurs doivent cacher ou afficher certains éléments. Ces éléments peuvent être un bouton, une animation ou une barre de navigation, etc. La plupart du temps, l'utilisateur veut qu'un bouton ou une barre de navigation soit visible pour le point de vue du bureau, mais pas pour le point de vue mobile.
Avec JavaScript, les utilisateurs peuvent facilement masquer ou afficher un élément sur la page Web, selon le comportement de l'utilisateur. Dans cet article, nous verrons comment JavaScript est utilisé à cet effet.
Cacher et afficher des éléments en javascript
En utilisant JavaScript, nous pouvons masquer ou afficher un élément sur la page Web en utilisant:
- style.afficher
- style.visibilité
Comprenons chacun d'eux séparément avec des exemples, puis comparons en quoi diffèrent les autres:
Comment utiliser le style.affichage en javascript: La propriété d'affichage représente un élément qui doit être affiché sur votre page Web… L'utilisation de cet utilisateur peut masquer l'ensemble de l'élément, et la page est construite car l'élément précédent n'était pas du tout là.
Syntaxe:
document.GetElementById ("Id-of-Element").style.display = "";Ici dans les virgules, une valeur doit être définie pour afficher le contenu ou non. Voici un exemple:
Pour cacher l'élément: style.affichage = «Aucun»:
Cliquez sur le bouton "Hide Me" pour masquer l'élément div:
Ceci est une pomme
Lorsque l'utilisateur clique sur le bouton, la fonction est appelée pour masquer l'élément. Cela se fait en affectant aucune valeur au style.afficher.
Regardez maintenant la sortie, comment le bouton a occupé l'espace de l'image. C'est ainsi que l'affichage fonctionne, il masque entièrement l'élément et reconstruit la page comme si l'élément n'était pas là en premier lieu.
Pour montrer un élément: style.affichage = “” ou «Block»:
Cliquez sur le bouton "Afficher-moi" pour afficher l'élément l'élément div:
Maintenant, de même, afin de montrer l'élément, le bouton a déplacé et a fourni de l'espace à l'élément lorsque l'affichage a été changé à partir du style.affiche = "Aucun" à style.affichage = “".
À travers ces manières, l'élément sera affiché ou complètement caché et pas seulement sa visibilité. La page sera reconstruite en fonction de ces comportements.
Comment utiliser le style.Visibilité en JavaScript: La visibilité du style fonctionne de la même manière, mais la différence est que seule la visibilité de l'élément est cachée du lecteur d'écran. Cela signifie que l'élément n'est pas supprimé du flux de la page, laissant ainsi de l'espace sur la page.
Syntaxe:
document.GetElementById ("Id-of-Element").style.Visibilité = "";Ici, dans des virgules, une valeur de «cachée» ou «» aucune valeur ne doit être définie pour afficher ou non le contenu. Pour mieux comprendre cela, voici un exemple:
C'est un paragraphe.
C'est un autre paragraphe.
Maintenant, ici, lorsque le bouton a été cliqué sur la visibilité, il ne l'a caché que pour l'œil de la visionneuse.
En cela, l'espace sur la page Web n'était pas occupé par l'élément. Cela montre comment style.affichage et style.visibilité différer.
Conclusion
Tout le monde veut masquer ou afficher des éléments particuliers sur sa page Web. Dans ce guide, nous avons appris des moyens de modifier la visibilité des éléments sur la page Web à l'aide de JavaScript. Il existe deux façons spécifiques, mais elles diffèrent légèrement les unes des autres. En utilisant style.afficher Le contenu est caché et son espace est occupé par l'autre contenu. Alors que l'utilisation style.visibilité, Le contenu est uniquement caché pour le lecteur, mais il est toujours là car son espace ne peut pas être occupé par d'autres éléments. Ceci est extrêmement utile pour les développeurs Web, car les développeurs veulent que certains contenus soient cachés et que certains soient affichés en fonction du point de vue.