Comment puis-je masquer et afficher des éléments HTML à l'aide de JavaScript ?

Comment masquer des éléments en JavaScript

Masquer des éléments sur une page Web peut améliorer l'expérience utilisateur et améliorer l'attrait visuel de votre site. Un moyen efficace de le faire en JavaScript consiste à exploiter la propriété de style d'affichage.

Masquer un élément après une interaction

Considérez le scénario dans lequel vous disposez d'un lien « Modifier » qui, lorsque vous cliquez dessus, devrait afficher une zone de texte modifiable. De plus, vous souhaitez masquer le texte d'espace réservé (« Lorem ipsum ») une fois que l'utilisateur commence à le modifier. Vous pouvez y parvenir en modifiant la fonction JavaScript suivante :

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';
}

Voici comment cela fonctionne :

• id est l'ID de l'élément que vous souhaitez rendre visible (par exemple, le textarea).
• text est l'ID de l'élément que vous souhaitez masquer (par exemple, le "Lorem ipsum" text).
• btn est une référence à l'élément qui a déclenché l'action (par exemple, le lien "Modifier").

Ainsi, lorsque l'on clique sur le lien "Modifier", JavaScript trouve la zone de texte correspondante et la rend visible. Il trouve également le texte d'espace réservé et le masque. Enfin, il masque le lien « Modifier » lui-même pour éviter des actions d'édition répétées.

Exemple de code

Pour implémenter cette solution, vous pouvez utiliser le code HTML modifié ci-dessous :

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

Cet exemple montre comment masquer le texte de l'espace réservé et le lien « Modifier » lorsque l'utilisateur clique sur le lien « Modifier ». Le résultat est une interface d'édition claire et intuitive pour votre page Web.

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!