Maison > Article > interface Web > HTML Masquer l'élément
HTML Masquer l'élément
- PHPzoriginal
- 2024-09-04 16:42:32479parcourir
L'attribut global caché en HTML5 est un attribut booléen. Il précise que l'élément ciblé est en outre pertinent ou non pour le document HTML. Un exemple d'utilisation de l'attribut caché est qu'il peut être utilisé pour couvrir/découvrir tout contenu particulier présent sur la page Web HTML qui n'est pas autorisé à moins que l'utilisateur n'ait été authentifié. D'ici là, les navigateurs n'afficheront pas les éléments avec une propriété cachée active (c'est-à-dire que l'attribut est défini).
Utilisation de l'attribut caché
Une telle utilisation des attributs cachés peut revenir à empêcher un utilisateur de voir un élément jusqu'à ce que certaines conditions soient remplies (telles que la sélection d'un bouton radio, etc.), après quoi, un code JavaScript pourrait stipuler à nouveau l'attribut caché. , rendant ainsi l'élément visible. Cet attribut ne doit pas être utilisé pour masquer le contenu uniquement pour une présentation individuelle ; il doit plutôt rester dans le même état pour toutes les présentations si un contenu reste masqué.
Le contenu masqué ne doit pas être associé à un contenu non masqué ou à un contenu descendant d'un contenu masqué qui est pourtant actif. Cela garantit que les éléments du formulaire peuvent encore être soumis et que les éléments de script peuvent encore être exécutés. Les scripts et les éléments peuvent cependant faire référence à tout contenu masqué dans un autre contexte.
Il serait totalement incorrect d'utiliser le
Syntaxe
<element hidden> </element>
Exemples d'éléments HTML masqués
Vous trouverez ci-dessous des exemples d'éléments HTML masqués :
Exemple n°1
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>
Sortie :
Exemple n°2
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>
Sortie :
Exemple n°3 – Utilité de l’attribut.
Selon la définition de l'attribut Hidden, nous pouvons masquer tout contenu présent dans une page Web HTML à l'aide de l'attribut caché, puis le code JavaScript peut être utilisé pour y accéder ultérieurement. L'objectif de masquer un élément peut également être atteint par CSS avec la propriété comme propriété d'affichage (c'est-à-dire en la définissant sur aucun), mais l'utilisation de l'attribut caché est une approche simple. Par conséquent, nous pouvons dire que le contenu avec un attribut caché est une tranche du DOM, mais l'utilisateur ne peut pas y accéder.
Dans l’exemple ci-dessous, nous choisirons le paramètre
Code :
<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>
Sortie :
Points importants à retenir
Voici quelques points importants qui doivent être bien connus avant d'interagir avec l'attribut caché :
- Le contenu accessible dans des résolutions et des tailles d'écran distinctes ne doit pas utiliser d'attribut caché pour masquer le contenu.
- L'attribut caché ne doit pas être utilisé pour masquer/couvrir les sections non visibles d'un sélecteur de contenu ou d'un composant d'onglet.
- L'élément non masqué ne doit pas être lié par hyperlien à un élément masqué.
- Les éléments marqués comme masqués sont toujours potentiellement actifs.
- Si vous souhaitez masquer le contenu à tous les utilisateurs, utilisez l'attribut caché HTML5 (avec l'affichage CSS : aucun pour les navigateurs qui ne prennent pas encore en charge le masqué). Il n'est pas nécessaire d'utiliser aria-hidden.
Conclusion
Vous trouverez ci-dessous quelques-uns des principaux points clés que vous devez retenir de ce sujet.
Les cas d'utilisation appropriés pour l'attribut caché incluent :
- Contenu qui n'est pas encore pertinent mais qui pourrait être nécessaire plus tard.
- Contenu qui a été utilisé précédemment mais qui n'est plus nécessaire.
- Contenu réutilisable et utilisé par diverses autres parties de la page à la manière d'un modèle.
- Création d'une toile hors écran comme tampon de dessin.
Les cas d'utilisation non appropriés d'un attribut caché incluent :
- Masquage des panneaux dans une boîte de dialogue à onglets.
- Masquer le contenu dans une présentation individuelle tout en souhaitant qu'il soit visible dans les autres.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!