隨著網路科技的不斷發展，Javascript（以下簡稱JS）已成為一個無孔不入的技術。由於其表現力強、靈活多變等特點，JS早已不再是網站開發的附屬品，而是成為了網頁互動以及動態效果的核心。本文將介紹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。
三、總結
本文介紹了一個基礎的JS操作：點選按鈕顯示/隱藏元素內容。透過JS部分語法的介紹以及具體實現方法的演示，相信大家可以更好地掌握該技能。要注意的是，JS的編寫需要小心謹慎，特別是在引用DOM物件時，一定要確保物件已經載入完成，以免出現意想不到的錯誤。
以上是javascript 按鈕 顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
