Attribut caché du HTML

Explications et conseils sur l’attribut caché de HTML, un attribut global introduit dans HTML 5 qui permet de masquer des éléments de la page directement à partir du HTML.

En HTML existe un attribut hidden qui permet de masquer des éléments d’une manière séncilla, sans nécessité de revenir à CSS ou Javascript. Dans cet article, nous vous expliquerons l’utilisation et nous prendrons en compte certains des conseils et considérations importants à tenir dans le compte.

Dans l’article Attribut caché du HTML retrouvez les prochains appartements intéressés.

Qu’est-ce que l’attribut caché du HTML

En HTML hidden c’est un attribut global que nous pouvons utiliser n’importe quel élément de la page et qui affecte directement votre visibilité. Fonctionnement de manière séncille, occultant l’élément de la page dans le cas où l’attribut est présent.

Un exemple d’utilisation sera le suivant :

<div hidden>

  Este elemento div no se verá en la página

</div>

C’est pourquoi il s’agit d’un attribut global qui nous permet d’utiliser n’importe quelle étiquette HTML là où nous sommes précis.

C’est un attribut boleano

L’attribut hidden c’est boleano. Eso quiere decir que nous n’avons pas besoin d’attribuer ningún valor. Le seul important est qu’il soit présent ou qu’il n’y ait pas d’attribution.

• Si l’attribut existe, alors occultez l’élément
• Si l’attribut n’est pas présent, alors il n’est pas appliqué et l’élément sera normalement.

C’est pourquoi je veux dire que ce n’est pas nécessaire de faire quelque chose comme ceci :

<div hidden="true">

  Esto está oculto por el atributo hidden que hemos colocado.

</div>

Inclut également la valeur de l’attribut Boleano Hidden Fuera “false“, selon l’application, l’attribut peut être présent.

<div hidden="false">

  Esto está oculto por el atributo hidden que hemos colocado.

</div>

En résumé, aucune importance pour la valeur que nous avons attribuée à l’auteur hiddenil suffit d’importer qu’il soit présent sur l’étiquette pour qu’il soit tenu en compte.

Pourquoi pouvez-vous utiliser l’attribut caché ?

Bon, en réalité, vous pouvez l’utiliser pour tout ce qui se passe, mais nous l’utilisons généralement pour marquer que aucun résultat n’est pertinent au moment du chargement de la page.

Par exemple, nous pouvons trouver un texte d’un article qui n’a pas d’importance et que nous ne voulons pas lire complètement le code si simplement occulter. Vous pouvez avoir des interfaces utilisateur qui ne veulent pas que Javascript soit initialisé, etc.

Attribut caché et CSS

Es muy important de savoir que n’importe quel style CSS de visibilité est présent devant l’attribut caché du HTML. Par conséquent, ce motif n’est pas recommandé de manière générale pour que les attributs cachés fonctionnent dans toutes les occasions.

Par exemple, si nous avons un attribut hidden et un paragraphe :

<p hidden>Este párrafo pensaría que está oculto</p>

Dans le cas où le CSS serait défini comme un simple display: block Dans les éléments définis, nous avons donc désactivé toute possibilité de fonctionnement de l’attribut hidden.

p {

  display: block;

}

Dans ce cas, comme tous les parrafos ont défini la valeur de display avec la valeur blockdonc ningún atributo hidden Je peux le faire fonctionner. Ceci peut amener à représenter un problème si nous sommes confiants que hidden nous devons nous cacher est ce parrafo.

Par conséquent, quelle valeur de display distinct de “none“, cela entraîne une désactivation de tout comportement attendu de l’attribut hidden.

Styles CSS pour garantir que les fonctions cachées fonctionnent correctement

Pour résoudre ce problème possible, si nous recherchons l’attribut hidden prévalezca sur le display Si vous êtes défini dans un élément donné, vous pouvez utiliser un code CSS de sélecteur par attribut.

[hidden] { 

  display: none !important;

}

Le CSS antérieur indique que tout élément qui tient l’attribut hidden Debería aura un display un none. Également avec la déclaration !important nous pensons donc que ce style est plus puissant que d’autres règles CSS qui sont définies plus adaptées aux éléments avec l’attribut hidden.

¿Aconsejamos usar caché?

La question du million est-elle debo ou pas de debo à utiliser cachée ?. La clé est dans le degré de contrôle qui tient sur votre code et les compléments qui utilisent le CSS, comme les frameworks CSS, Javascript, etc.

En principe, avec le contrôle du débit et en respectant les limites de cet attribut, il est possible que vous n’ayez pas de problème lors de l’utilisation, mais comme vous pouvez le comparer, hidden C’est un attribut très faible et il est facilement utilisé par d’autres facteurs comme le CSS.

Si j’ai mon avis personnel, je préfère définir mes propres règles CSS pour occulter les éléments. Personnellement, j’aimerai que le contenu indique dans les aspects HTML qui sont affichés dans la présentation, comme le contenu qu’un élément est affiché ou non sur la page.

Caché et Javascript

L’attribut hidden également présent dans les éléments du DOM de manière globale. Il s’agit d’une propriété des éléments de la page sur laquelle nous pouvons attribuer un true oh mon Dieu false pour occulter ou aucun de ces éléments.

Par exemple, si nous avons un objet du DOM, nous pouvons attribuer à votre propriété cachée une valeur vraie pour qu’elle soit occultée.

let elemento = document.getElementById('parrafo');

elemento.hidden = true;

Comme vous l’avez compris, vous avez attribué un faux élément à l’élément occultant. C’est un truc pour occulter ou montrer des éléments mais il y a le même problème que l’attribut caché. C’est pourquoi, dans le cas où il y a un affichage appliqué avec CSS sur l’élément, il sera fonctionnel.

Pour voir un exemple d’application dynamique de la propriété hidden nous avons un code pour ici où nous trouvons un paragraphe et un bouton. En appuyant sur le bouton, vous occulterez ou afficherez le paramètre, modifiant alternativement la valeur de la propriété. hidden de Javascript.

<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Trabajando con hidden en Javascript</title>

  <style>

    /*

    Si colocamos este estilo el ejemplo se nos iría al traste

    p {

      display: block;

    }

    */

  </style>

</head>

<body>

  <h1>Atributo hidden</h1>



  <p hidden="false" id="parrafo">

    Esto está oculto por el atributo hidden que hemos colocado.

  </p>



  <button id="toggle">ocultar / mostrar</button>



  <script>

    document.getElementById('toggle').addEventListener('click', function() {

      let elemento = document.getElementById('parrafo');

      elemento.hidden = ! elemento.hidden;

    });

  </script>

</body>

</html>

Assurez-vous que le code CSS est commenté. Si vous n’avez pas commenté l’exemple simplement sans fonction, nous allons donc appliquer un display: block a todos los párrafos, lo que venceria al atributo hidden.

Seulement pour que vous soyez constant et si quelqu’un vous intéresse, comme une autre alternative la plus fiable basée sur Javascript pour occulter ou montrer le modèle de méthode alternative, nous pouvons également utiliser ce code :

let elemento = document.getElementById('parrafo');

elemento.style.display = elemento.style.display == 'block' ? 'none' : 'block';

Conclusion

Nous connaissons et avons appris à utiliser l’attribut hidden, global pour tous les éléments HTML. Nous avons l’impression que vous avez une certaine utilité, mais que cela entraîne un conflit pour votre déficience. Queda a tu juicio si vous l’utilisez ou non, mais dans tout ce cas, il est bon que vous le sachiez si vous l’avez rencontré dans n’importe quel exemple de projet Web.

to desarrolloweb.com

---

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931

---