javascript中怎么实现点击按钮显示隐藏

发布时间：2023-10-06 12:00:24 所属栏目：教程来源：互联网

导读： 　　一、基础语法

　　在介绍如何实现按钮显示和隐藏之前，我们需要先了解JS部分基础语法知识。在网页HTML文件中，我们可以通过<script>标签将JS代码嵌入到网页中，达到控制网页元素

　　一、基础语法

　　在介绍如何实现按钮显示和隐藏之前，我们需要先了解JS部分基础语法知识。在网页HTML文件中，我们可以通过<script>标签将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或none。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

javascript中怎么实现点击按钮显示 隐藏

javascript中怎么实现点击按钮显示隐藏