Comment utiliser JavaScript pour afficher du texte masqué lorsque l'on clique sur un bouton ?

Comment utiliser JavaScript pour implémenter la fonction de clic sur un bouton pour afficher le texte masqué ?

Dans le développement front-end, nous rencontrons souvent le besoin de cliquer sur un bouton pour afficher ou masquer du contenu textuel. Cette fonctionnalité peut être facilement implémentée à l'aide de JavaScript. Cet article vous apprendra comment utiliser JavaScript pour changer l'affichage et l'état masqué du texte, et fournira des exemples de code spécifiques.

Tout d'abord, ajoutez un bouton en HTML et le contenu du texte masqué qui doit être basculé :

<button id="toggleButton">点击切换显示/隐藏</button>
<div id="textContent" style="display: none;">
    这是切换显示/隐藏的文本内容。
</div>

Dans le code ci-dessus, nous avons ajouté un bouton et lui avons donné un identifiant unique toggleButton. Dans l'élément <div>, nous définissons le style de display: none; pour masquer initialement le contenu du texte. toggleButton。在 <div> 元素中，我们设置了 display: none; 的样式，来初始隐藏文本内容。

接下来，我们使用 JavaScript 来实现切换显示和隐藏的功能。在 HTML 文件中添加以下代码块：

<script>
    var toggleButton = document.getElementById("toggleButton");
    var textContent = document.getElementById("textContent");

    toggleButton.addEventListener("click", function() {
        if (textContent.style.display === "none") {
            textContent.style.display = "block";
        } else {
            textContent.style.display = "none";
        }
    });
</script>

上述代码中，我们首先获取了具有唯一 id 的按钮和文本内容的元素。然后，我们使用 addEventListener 来添加一个点击事件监听器，当按钮被点击时，执行对应的函数。

事件监听器中的函数逻辑很简单：检查文本内容的 display

Ensuite, nous utilisons JavaScript pour implémenter la fonction de commutation d'affichage et de masquage. Ajoutez le bloc de code suivant dans le fichier HTML :

rrreee

Dans le code ci-dessus, nous obtenons d'abord l'élément avec l'identifiant unique du bouton et le contenu du texte. Ensuite, nous utilisons addEventListener pour ajouter un écouteur d'événement de clic Lorsque vous cliquez sur le bouton, la fonction correspondante est exécutée.

La logique de la fonction dans l'écouteur d'événements est simple : vérifiez l'attribut display du contenu du texte. Si « aucun », réglez-le sur « bloquer » pour afficher le contenu du texte ; si « bloquer », réglez-le sur « aucun » pour masquer le contenu du texte. 🎜🎜Maintenant, vous pouvez exécuter le code dans le navigateur et cliquer sur le bouton pour afficher ou masquer le contenu du texte. 🎜🎜Ci-dessus sont les étapes détaillées et les exemples de code pour utiliser JavaScript pour implémenter la fonction de clic sur un bouton pour afficher le texte masqué. Avec un simple code JavaScript, vous pouvez facilement implémenter cette fonctionnalité pour ajouter de l'interactivité et une expérience utilisateur à vos pages 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!