首頁 > 文章 > web前端 > javascript 按鈕顯示隱藏

javascript 按鈕顯示隱藏

PHPz原創: 2023-05-12 11:23:066055瀏覽

隨著網路科技的不斷發展，Javascript（以下簡稱JS）已成為一個無孔不入的技術。由於其表現力強、靈活多變等特點，JS早已不再是網站開發的附屬品，而是成為了網頁互動以及動態效果的核心。本文將介紹JS的一個基礎操作：點選按鈕顯示/隱藏內容的實作方法。

一、基礎語法

在介紹如何實作按鈕顯示和隱藏之前，我們需要先了解JS部分基礎語法知識。在網頁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或none。

三、總結

本文介紹了一個基礎的JS操作：點選按鈕顯示/隱藏元素內容。透過JS部分語法的介紹以及具體實現方法的演示，相信大家可以更好地掌握該技能。要注意的是，JS的編寫需要小心謹慎，特別是在引用DOM物件時，一定要確保物件已經載入完成，以免出現意想不到的錯誤。

以上是javascript 按鈕顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery中怎麼實現非同步載入圖片下一篇：jquery中怎麼實現非同步載入圖片

看更多

javascript 按鈕 顯示隱藏

相關文章

javascript 按鈕顯示隱藏