如何使用 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中文网其他相关文章！