Comment puis-je masquer et afficher des éléments HTML à l'aide de la propriété « display » de JavaScript ?

Masquer et afficher les éléments à l'aide de JavaScript

Dans le développement Web, contrôler la visibilité des éléments de la page est une exigence courante. Dans cet article, nous explorons comment masquer et afficher des éléments en JavaScript à l'aide de la propriété de style d'affichage.

Pour masquer un élément, nous définissons sa propriété d'affichage sur aucun. Cela supprime l'élément du flux visuel de la page, le rendant invisible pour les utilisateurs. Pour afficher un élément masqué, nous redéfinissons simplement sa propriété d'affichage sur une valeur visible, telle que block ou inline.

Exemple de scénario : masquer et afficher la fonctionnalité d'édition

Améliorons une structure HTML simple avec des fonctionnalités améliorées :

<td>
  <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
  <span>

Ce code affiche un lien "Modifier" et une zone de texte masquée. Cliquer sur le lien devrait afficher la zone de texte et masquer le texte "Lorem ipsum".

Solution

Nous pouvons modifier la fonction showStuff pour gérer à la fois le masquage et l'affichage des éléments :

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

Ici, nous :

• Affichons l'élément cible (id) en définissant sa propriété d'affichage sur block.
• Masquer le texte "Lorem ipsum" (text) en définissant sa propriété d'affichage sur none.
• Masquer le lien "Modifier" (btn) en définissant sa propriété d'affichage sur none.

Exemple modifié

Incorporation de ces modifications dans le HTML :

<td>
  <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
  <span>

Lorsque vous cliquez sur le lien « Modifier », il déclenche la fonction showStuff, qui affiche la zone de texte, masque le texte « Lorem ipsum » et masque le lien lui-même.

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!