Comment masquer du contenu en javascript ? Une brève analyse de diverses méthodes

Dans le développement Web, masquer du contenu est une technique très courante. Cela peut rendre la page Web plus concise et plus belle, et cela peut également masquer certaines informations privées ou fonctions incomplètes. En Javascript, il existe de nombreuses façons de masquer du contenu, et nous les présenterons une par une ci-dessous.

1. attribut d'affichage

L'attribut d'affichage est l'un des attributs les plus courants, qui peut être utilisé pour contrôler la visibilité des éléments. Vous pouvez masquer un élément en définissant son attribut d'affichage sur none.

Par exemple, supposons que nous ayons un élément div et que nous voulions le masquer, vous pouvez utiliser le code suivant :

document.getElementById("myDiv").style.display = "none";

Ce code trouvera l'élément avec l'identifiant myDiv et définira son attribut d'affichage sur none, le masquant ainsi.

Lorsque vous devez afficher à nouveau cet élément, vous pouvez utiliser le code suivant :

document.getElementById("myDiv").style.display = "block";

Ce code définira l'attribut d'affichage de l'élément sur la valeur par défaut de block, afin qu'il puisse être à nouveau affiché.

2. attribut visibilité

Contrairement à l'attribut display, l'attribut visibilité peut être utilisé pour contrôler la visibilité d'un élément. Si vous définissez la propriété de visibilité d'un élément sur masqué, l'élément ne sera pas affiché, mais l'espace qu'il occupe existera toujours.

Par exemple, si nous avons un élément p et que nous voulons le masquer, nous pouvons utiliser le code suivant :

document.getElementById("myP").style.visibility = "hidden";

Ce code trouvera l'élément avec l'identifiant myP et définira son attribut de visibilité sur caché, le masquant ainsi.

Lorsque vous devez afficher à nouveau cet élément, vous pouvez utiliser le code suivant :

document.getElementById("myP").style.visibility = "visible";

Ce code définira la propriété de visibilité de l'élément sur visible, afin qu'il puisse être à nouveau affiché. L'attribut

3. opacity

opacity peut être utilisé pour définir la transparence d'un élément afin d'obtenir un effet de masquage. Si vous définissez la propriété d'opacité d'un élément sur 0, l'élément est complètement invisible ; si vous la définissez sur 1, cela signifie que l'élément est complètement visible.

Par exemple, si nous avons un élément bouton et que nous voulons le rendre transparent, nous pouvons utiliser le code suivant :

document.getElementById("myBtn").style.opacity = "0";

Ce code trouvera l'élément avec l'identifiant myBtn et définira son attribut d'opacité à 0, obtenant ainsi un élément transparent. effet.

Lorsque vous devez restaurer l'état visible d'un bouton, vous pouvez utiliser le code suivant :

document.getElementById("myBtn").style.opacity = "1";

Ce code définira la propriété d'opacité de l'élément sur 1, le rendant à nouveau visible.

4. attribut position

L'attribut position peut être utilisé pour contrôler la position d'un élément. Si vous définissez la propriété position de l'élément sur absolue ou fixe et que ses propriétés left et top sont définies sur des nombres négatifs, l'élément sera déplacé hors de la zone visible, obtenant ainsi un effet masqué.

Par exemple, supposons que nous ayons un élément div et que nous souhaitions le déplacer hors de la zone visible, vous pouvez utiliser le code suivant :

document.getElementById("myDiv").style.position = "absolute";
document.getElementById("myDiv").style.left = "-9999px";
document.getElementById("myDiv").style.top = "-9999px";

Ce code trouvera l'élément avec l'identifiant myDiv et définira son attribut de position sur l'absolu. , attributs left et top Définissez-le sur un nombre négatif pour le déplacer hors de la zone visible et le masquer.

Lorsque vous devez afficher à nouveau cet élément, vous pouvez utiliser le code suivant :

document.getElementById("myDiv").style.position = "static";
document.getElementById("myDiv").style.left = "auto";
document.getElementById("myDiv").style.top = "auto";

Ce code définira l'attribut de position de l'élément sur static, et définira les attributs left et top sur la valeur par défaut auto, afin qu'il peut être affiché à nouveau.

Pour résumer, il existe de nombreuses façons de masquer du contenu en Javascript, et chaque méthode a des scénarios d'application différents. En fonction des besoins réels, nous pouvons choisir la méthode de masquage la plus appropriée, rendant ainsi la page Web plus belle et plus privée.

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!