Maison > Article > interface Web > bouton javascript afficher masquer

bouton javascript afficher masquer

PHPzoriginal: 2023-05-12 11:23:066126parcourir

Avec le développement continu de la technologie Internet, Javascript (ci-après dénommé JS) est devenu une technologie omniprésente. En raison de son expressivité, de sa flexibilité et d'autres caractéristiques, JS n'est plus un accessoire du développement de sites Web, mais est devenu le cœur de l'interaction et des effets dynamiques des pages Web. Cet article présentera une opération de base de JS : comment afficher/masquer du contenu en cliquant sur un bouton.

1. Syntaxe de base

Avant de présenter comment afficher et masquer les boutons, nous devons comprendre certaines connaissances de base en syntaxe de JS. Dans le fichier HTML de la page Web, nous pouvons intégrer du code JS dans la page Web via la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour contrôler les éléments de la page Web. Voici le format général pour intégrer JS dans des documents HTML : 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签将JS代码嵌入到网页中，达到控制网页元素的目的。以下是HTML文档中嵌入JS的一般格式：

<html>
  <head>
    <script>
      JS代码内容
    </script>
  </head>
  <body>
    HTML文档正文
  </body>
</html>

在JS中，我们通常使用document.getElementById()函数来获取网页元素。该函数会根据id属性的值获取对应的HTML元素，并返回该元素的对象。例如：

<button id="btn">点击我</button>
<script>
  var btn = document.getElementById("btn");
</script>

上述代码就可以获取一个id为“btn”的按钮元素，然后将其赋值给变量btn。接下来，我们可以使用JS来控制该按钮的显示/隐藏。

二、点击按钮显示/隐藏

1、控制按钮的显示/隐藏

在JS中，我们可以利用CSS样式的display属性来控制元素的显示或隐藏。当display属性的值为none时，该元素会被隐藏；当display属性的值为block时，该元素会被显示。

因此，我们只需要创建一个按钮并绑定其点击事件，在点击事件中将被控制元素的display属性设置为none或block即可实现该元素的显示/隐藏。

以下是一个简单的实现方法：

<button onclick="toggle()">点击我</button>
<div id="content" style="display:none;">需要显示/隐藏的内容</div>
<script>
  function toggle() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

上述代码中，我们创建了一个按钮，并在其onclick事件中绑定了函数toggle()，该函数用于控制需要显示/隐藏的元素。在该函数中，我们通过document.getElementById()函数获取到id="content"的元素，并将其赋值给变量content。接下来，我们判断该元素的display属性值是否为none，如果是，则将其设置为block；如果不是，则将其设置为none。

2、控制多个元素的显示/隐藏

上述方法只能控制单个元素的显示/隐藏，如果需要控制多个元素，则需要进行相应修改。我们可以将需要控制的元素封装在同一个父级元素内，并在父级元素的onclick事件中进行遍历，然后通过元素的style.display属性来控制其子元素的显示/隐藏。

以下是一个实现方法：

<button onclick="toggle()">点击我</button>
<div id="wrapper">
  <div class="content" style="display:none;">需要显示/隐藏的内容 1</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 2</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 3</div>
</div>
<script>
  function toggle() {
    var wrapper = document.getElementById("wrapper");
    var contents = wrapper.getElementsByClassName("content");
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  }
</script>

上述代码中，我们将需要控制的三个元素封装在id="wrapper"的父级元素内。在点击事件触发时，toggle()函数会首先获取到父级元素对象wrapper，然后通过wrapper.getElementsByClassName()方法获取到所有class="content"的元素，并将其存放在数组contents中。接下来，我们使用for循环遍历该数组中所有元素，并判断其display属性的值是否为none，然后将其设置为block或nonerrreee

En JS, nous utilisons généralement la fonction document.getElementById() pour obtenir des éléments de page Web. Cette fonction obtiendra l'élément HTML correspondant en fonction de la valeur de l'attribut id et renverra l'objet de l'élément. Par exemple :

rrreee

Le code ci-dessus peut obtenir un élément bouton avec l'identifiant "btn", puis l'attribuer à la variable btn. Ensuite, nous pouvons utiliser JS pour contrôler l’affichage/masquage du bouton.

2. Cliquez sur le bouton pour afficher/masquer🎜🎜1. Contrôler l'affichage/masquage du bouton🎜🎜En JS, nous pouvons utiliser l'attribut display du style CSS pour contrôler l'affichage ou le masquage. d'éléments. Lorsque la valeur de l'attribut display est none, l'élément sera masqué lorsque la valeur de l'attribut display est

block , l’élément sera affiché. 🎜🎜Il nous suffit donc de créer un bouton et de lier son événement click. Dans l'événement click, définissez l'attribut <code>display

de l'élément contrôlé sur none ou . Le bloc peut être utilisé pour afficher/masquer l'élément. 🎜🎜Ce qui suit est une méthode d'implémentation simple : 🎜rrreee🎜Dans le code ci-dessus, nous créons un bouton et lions la fonction toggle() dans son événement onclick, cette fonction est utilisé pour contrôler les éléments qui doivent être affichés/masqués. Dans cette fonction, nous obtenons l'élément de id="content" via la fonction document.getElementById() et l'attribuons à la variable content . Ensuite, nous déterminons si la valeur de l'attribut display de l'élément est none. Si tel est le cas, définissez-la sur block ; à aucun. 🎜🎜2. Contrôler l'affichage/masquage de plusieurs éléments🎜🎜La méthode ci-dessus ne peut contrôler l'affichage/masquage d'un seul élément que si vous devez contrôler plusieurs éléments, vous devez apporter les modifications correspondantes. Nous pouvons encapsuler les éléments qui doivent être contrôlés dans le même élément parent, parcourir l'événement onclick de l'élément parent, puis utiliser l'attribut style.display de l'élément pour contrôler le afficher/masquer ses éléments enfants. 🎜🎜Ce qui suit est une méthode d'implémentation : 🎜rrreee🎜Dans le code ci-dessus, nous encapsulons les trois éléments qui doivent être contrôlés dans l'élément parent de id="wrapper". Lorsque l'événement click est déclenché, la fonction toggle() obtiendra d'abord l'objet élément parent wrapper, puis l'obtiendra via

wrapper.getElementsByClassName() à tous les éléments class="content" et stockez-les dans le tableau contents. Ensuite, nous utilisons for pour parcourir tous les éléments du tableau et déterminons si la valeur de son attribut display est aucun, puis définissons c'est block ou aucun. 🎜🎜3. Résumé🎜🎜Cet article présente une opération JS de base : cliquez sur un bouton pour afficher/masquer le contenu de l'élément. Grâce à l'introduction d'une partie de la syntaxe de JS et à la démonstration de méthodes d'implémentation spécifiques, je pense que chacun peut mieux maîtriser cette compétence. Il convient de noter que vous devez être prudent lors de l'écriture de JS, notamment lors du référencement d'objets DOM, vous devez vous assurer que les objets ont été chargés pour éviter des erreurs inattendues. 🎜

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!

JavaScript css html for 封装循环 class JS 对象事件 dom display

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment charger des images de manière asynchrone dans jqueryArticle suivant：Comment charger des images de manière asynchrone dans jquery

Articles Liés

Voir plus