HTML masquer l'affichage

HTML Masquer et Afficher

Dans le code HTML, vous devez parfois masquer et afficher certains éléments. Dans cet article, nous aborderons plusieurs façons de masquer et d'afficher des éléments en HTML.

1. Utilisez l'attribut display

L'attribut display est utilisé pour spécifier le mode d'affichage d'un élément. Il a les valeurs facultatives suivantes :

• none : L'élément n'est pas affiché et ne prend pas de place.
• block : les éléments sont affichés au niveau du bloc, avec des sauts de ligne avant et après.
• inline : les éléments sont affichés en ligne, sans sauts de ligne avant et après.
• inline-block : l'élément est affiché au niveau du bloc en ligne, sans saut de ligne avant et après, mais des attributs tels que la largeur et la hauteur peuvent être définis.

En définissant l'attribut display, les éléments peuvent être masqués et affichés :

<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.display='block'">显示</button>
<button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>

Dans le code ci-dessus, nous définissons d'abord l'attribut display de l'élément div sur none via l'attribut style, c'est-à-dire en masquant l'élément. Ensuite, l'opération de clic sur le bouton est implémentée via les événements onclick des deux éléments bouton et JavaScript, modifiant ainsi l'état d'affichage de l'élément.

2. Utilisez l'attribut de visibilité

L'attribut de visibilité est utilisé pour spécifier la visibilité de l'élément. Il a les valeurs facultatives suivantes :

• visible : L'élément est visible.
• caché : L'élément est invisible mais prend quand même de la place.

En définissant l'attribut de visibilité, l'élément peut être masqué et affiché :

<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button>
<button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>

Dans le code ci-dessus, nous définissons d'abord l'attribut de visibilité de l'élément div sur caché via l'attribut de style, c'est-à-dire en masquant l'élément. Ensuite, l'opération de clic sur le bouton est implémentée via les événements onclick des deux éléments bouton et JavaScript, modifiant ainsi l'état d'affichage de l'élément.

3. Utilisez l'attribut opacité

L'attribut opacité est utilisé pour spécifier la transparence de l'élément. La plage de valeurs est de 0 à 1, 0 signifie complètement transparent et 1 signifie opaque. En définissant l'attribut opacity, vous pouvez obtenir les effets de fondu et de fondu des éléments :

<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>

<script>
  function show() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 1;
    div.style.transition = "opacity 1s";
  }
  
  function hide() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 0;
    div.style.transition = "opacity 1s";
  }
</script>

Dans le code ci-dessus, nous obtenons les effets de fondu et de fondu de l'élément div en définissant l'attribut opacité et attribut de transition de l’élément div. Lorsque vous cliquez sur le bouton, définissez l'attribut d'opacité de l'élément div sur la valeur correspondante (0 ou 1) via JavaScript, puis définissez l'attribut de transition sur le temps correspondant pour obtenir les effets de fondu et de fondu.

Résumé

Les trois méthodes ci-dessus peuvent toutes obtenir l'effet de masquage et d'affichage des éléments HTML, mais dans différentes situations, elles peuvent avoir des effets d'utilisation différents. Il est nécessaire de choisir la méthode appropriée en fonction des besoins et des scénarios spécifiques.

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!