如何使用 JavaScript 顯示和隱藏 DIV？

使用 JavaScript 顯示/隱藏「div」

Web 開發中的一個常見任務是動態顯示或隱藏頁面上的元素。這可以使用 JavaScript 操作元素的樣式屬性來完成。

隱藏單一Div

要隱藏ID 為「my_div」的單一div，請使用下列指令碼:

document.getElementById("my_div").style.display = "none";

顯示隱藏Div

要顯示ID為「my_div」的隱藏div，請使用以下程式碼：

document.getElementById("my_div").style.display = "block";

切換可見性

要切換ID 為「my_div」的div 的可見性，請使用以下指令碼：

var div = document.getElementById("my_div");
if (div.style.display == "none") {
  div.style.display = "block";
} else {
  div.style.display = "none";
}

使用Visibility屬性

或者，visibility 屬性可用於隱藏元素而不影響其版面。若要使用可見性隱藏 div，請使用以下程式碼：

document.getElementById("my_div").style.visibility = "hidden";

要使用可見性顯示隱藏的div，請使用以下程式碼：

document.getElementById("my_div").style.visibility = "visible";

隱藏集合元素

要隱藏多個元素，請使用循環迭代它們並將其顯示或可見性設定為「無」：

var elements = document.querySelectorAll(".my_class");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.display = "none";
}

以上是如何使用 JavaScript 顯示和隱藏 DIV？的詳細內容。更多資訊請關注PHP中文網其他相關文章！